Question

Hey guys, this is simple but I can’t make it workn… blah!

I have a UL with many LI. Inside of each LI I have a and two :

<ul>    
  <li><span>Qualification</span> - <a class="editItem" href="get/14">edit</a> | <a class="deleteItem" href="delete/14">delete</a></li>
</ul>

When I click the delete anchor, I would like to hide the LI. How can I select the LI?

I tried something like this:

$(".deleteItem").click(function(e) {
     $(this).parent().find("li").hide();
     // or
     $(this).prev().prev().prev().hide();

});

But it doesn’t work at all. 🙁 What am I doing wrong? Thanks..

Answer 1

To get the LI:

$(".deleteItem").click(function(e) {
  $(this).closest("li").hide();
});

.prev() refers to siblings, in this case <li> is a parent to the link, .closest() gets the nearest parent matching the selector.