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

You don't have IDs on your <li>s

How about simply

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

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.

Answer 3

Assuming you're using a recent version of jQuery:

$('.itemDelete').live('click', 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.