Question

I’m trying to delete / remove a image from my image list. I’m too tired think straight, so I need some assistance please.

Here is my HTML code:

<li id="listItem_dsc_6436.jpg"> 
  <a href="http://storelocator.com/wp-content/uploads/slgallery/brand/5f/c6/dsc_6436.jpg"><img alt="dsc_6436.jpg" src="http://storelocator.com/wp-content/uploads/slgallery/brand/5f/c6/thumb/dsc_6436.jpg"/></a>
  <div class="buttonPanel">
    <span title="Delete image" class="btnRemoveItem floatRight" id="dsc_6436.jpg"> </span>
  </div>
</li>

And this is my javascript code:

jQuery('.btnRemoveItem').click(function(){
  jQuery('#listItem_' +jQuery(this).attr('id')).remove();
});

This is not working. What am I missing?

Answer 1

Try $(this).closest('li').remove().
You could also add a class (eg, ImageItem) to the li, then call closest('li.ImageItem').remove().

The closest function finds the nearest parent element that matches a selector.

EDIT:
To make it fade out, write the following:

var li = $(this).closest('li')
li.fadeOut('slow', function() { li.remove(); });

This will remove the element once the animation is completed.