Selecting previous element using jQuery

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.

Answer 2

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

Try that.

Answer 3

The li is the parent of the anchor you're clicking, so you could do this:

$(".deleteItem").click(function(e) {
    e.preventDefault();
     $(this).parent().hide();

});

Answer 4

should be simply:

$(this).parent().hide();

the LI is the parent of the A element. Others are siblings. Prev is used to find the previous sibling, so it wont give you the parent.

Answer 5

It appears your need to fire off a request to delete the record itself from the database too. So rather than focusing on just hiding the li, you shouldn't neglect your link's original purpose:

$(".deleteItem").click(function(e){
  // prevent page-change
  e.preventDefault();
  // ask server to delete this record
  $.post($(this).attr("href"), function(result){
    // remove this record upon server-response
    $(e.target).closest("li").slideUp().remove();
  });
});