Question

I have some markup like this:

<div class="large-image">
    <img src="foo.jpg" class="original-size"> <--This persists
    <img src="foo-fullsize.jpg" class="zoomed"> <--injected by jQuery zoom plugin
    <img src="bar-fullsize.jpg" class="zoomed"> <--also injected
</div>

<div class="thumbnails">
    <a href="foo-fullsize.jpg" class="thumb"><img src="foo-thumb.jpg"></a>
    <a href="bar-fullsize.jpg" class="thumb"><img src="bar-thumb.jpg"></a>
</div>

I have some code like:

$(window).load(function() {
   $('a.thumb').click(function(){
      $('#main-image').zoom({url: this.href}); // jQuery zoom
   });
});

Every time I click a thumb link, the zoom plugin injects a new image into the <div class="large-image"> container. I would like to be able to remove all existing images with class zoomed before a new one is created. I know I need to use on() to accomplish this, but I can’t seem to get it to work with the generated images.

Answer 1

This should do it:

$(window).load(function() {
  $('a.thumb').on('click', function() {
    $('img.zoomed', this).remove(); 
  });
});

This will remove all .zoomed images relative to the thumbnail clicked. If you want to target every .zoomed image on the page, you’ll want to drop the context:

$('img.zoomed').

---

Edit

I didn’t realise it was generated content. Give this a whirl:

$(window).load(function() {
  $(document).on('click', 'a.thumb', function() {
    $('img.zoomed').remove(); 
  });
});