jQuery Remove LI from UL with a hyperlink in the LI

Question

I have a unordered list:

<ul id="sortable">   <li id="1" class="ui-state-default">First <a href='#' title='delete' class="itemDelete">x</a></li>   <li id="2" class="ui-state-default">Second <a href='#' title='delete' class="itemDelete">x</a></li>   <li id="3" class="ui-state-default">Third <a href='#' title='delete' class="itemDelete">x</a></li> </ul> 

I want to remove the <li> from the <ul>. I have handled the click event of the class itemDelete where I try to do a remove but I assume its not working because I can't remove the <li> as a child is calling it?

$('.itemDelete').live("click", function() {             var id = $(this).parent().get(0).id;               $("#" + id).remove();          }); 

What's the best approach?

Answer 1

Assuming you're using a recent version of jQuery:

$('#sortable').on('click', '.itemDelete', function() {     $(this).closest('li').remove(); }); 

closest is a little more dynamic than parent (although parent works here as well.) It gets the li that is closest to the current element, upwards in the structure.

Answer 2

Actually, the way you have it as of now, id is going to be undefined, because none of the li's have ids.

why not just do

$(this).parent().remove() 

also, don't forget to return false.