CODEWITHSUNDEEP
jquery
Steven
Steven

Reputation: 19455

Remove LI from UL

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?

Upvotes: 1

Views: 3797

Answers (4)

Antony Hatchkins
Antony Hatchkins

Reputation: 34044

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

Upvotes: 0

SLaks
SLaks

Reputation: 888223

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.

Upvotes: 3

Dan F
Dan F

Reputation: 12051

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.

Upvotes: 1

Antony Hatchkins
Antony Hatchkins

Reputation: 34044

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

Some more versions here

Upvotes: 0

Related Questions