Remove LI from UL

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"&gt;&lt;img alt="dsc_6436.jpg" src="http://storelocator.com/wp-content/uploads/slgallery/brand/5f/c6/thumb/dsc_6436.jpg"/&gt;&lt;/a&gt;
  <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.

Answer 2

IE dislikes clickable spans. Especially empty ones. Enter some text into it.

Some more versions here

Answer 3

I think it could be the . in the selector that's confusing it. You're telling it to find the thing with the ID of listItem_dsc_6436 and a class of jpg, which isn't exactly what you want :-)

If you can, replace the . serverside. Or you could even do it clientside with some jQuery fu. Otherwise, SLaks suggestion should work equally well.

Answer 4

jQuery doesn't like dots in ids: docs Remove '.' from id and everything will work fine ;)