Adding and removing an element multiple times with jQuery

I'm using jQuery to append a youtube video when a button is clicked.

onclick="$('#videogallery').append('<iframe width=725 height=398 src=http://www.youtube.com/embed/8Pi-dHJSkrk frameborder=0 allowfullscreen></iframe>');"

I'm then using jQuery again to remove it when another button is clicked.

onclick="$('iframe').remove();"

It works fine the first time around but If I add the video, remove it, and then try to add it again. It adds and removes itself instantly.

Why is this happening? It seems like the $('iframe').remove(); function is running constantly after the button is clicked.

EDIT

Here is the expanded version of the code.

   <div class="product-media" id="product-media1">
    <map name="submenu3" onclick="$('iframe').remove();">
      <area shape="rect" coords="0, 0, 95, 25"  onClick="swap3('product-media1','product-details1');">
      <area shape="rect" coords="103, 0, 213, 25"  onClick="swap3('product-media1','product-specs1');">
    </map>
    <img src="images/submenu3.jpg" alt="" border="0" usemap="submen开发者_高级运维u3" /><br /><br />
    <p>&nbsp;</p>
    <div id="videogallery">
                <a rel="#voverlay" href="#" onclick="$('#videogallery').append('<iframe width=725 height=398 src=http://www.youtube.com/embed/8Pi-dHJSkrk frameborder=0 allowfullscreen></iframe>');">
        <span class="thumb" onClick="swapvid"><img src="images/video.jpg" alt="" align="left" /></span><span></span>
      </a><br />
      &nbsp;&nbsp;Watch Scotch-Brite&trade; Radial Discs in action
    </div>
  </div>

This works fine: http://jsfiddle.net/YssHJ/

$('#add').click(function(){
    $('#vid').append('<iframe width=725 height=398 src=http://www.youtube.com/embed/8Pi-dHJSkrk frameborder=0 allowfullscreen></iframe>');

});


$('#del').click(function(){
    $('iframe').remove();
});

EDIT: fiddle using a map click http://jsfiddle.net/YssHJ/2/