Adding and removing an element multiple times with jQuery

Question

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="submenu3" /><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>

Could you post the whole code? It sounds like you are stacking extra "onclick" events. This is bad coding, but you could fix it simply by doing a return false in the onclick function — Brian Hoover
– Brian Hoover, Commented Sep 29, 2011 at 20:22

Jack · Accepted Answer · 2011-09-29 20:39:30Z

4

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/

edited Sep 29, 2011 at 20:39

answered Sep 29, 2011 at 20:24

Jack

8,9413 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Philip Kirkbride Over a year ago

I see that it works on jsfiddle so not sure why its not working on myn. I have added a bigger chunk of my code. Could it be that using onClick on a map causes problems?

Jack Over a year ago

I updated my answer. I also really think you should separate out your javascript from your html, it makes everything much nicer.

Collectives™ on Stack Overflow

Adding and removing an element multiple times with jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related