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..

Thanks everybody! For some reason, using $(this) inside my ajax function wasn't working. But all the answers above are right. Thank you again! — Guillermo Guerini
– Guillermo Guerini, Commented Mar 1, 2010 at 16:57

Nick Craver · Accepted Answer · 2010-02-25 17:16:24Z

5

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.

answered Feb 25, 2010 at 17:16

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jbgo · Accepted Answer · 2010-02-25 17:21:11Z

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();

});

answered Feb 25, 2010 at 17:21

jbgo

1031 silver badge5 bronze badges

Comments

brettkelly · Accepted Answer · 2010-02-25 17:17:03Z

2

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

Try that.

answered Feb 25, 2010 at 17:17

brettkelly

28.3k8 gold badges58 silver badges73 bronze badges

Comments

Heinrich Lee Yu · Accepted Answer · 2010-02-25 17:22:02Z

1

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.

answered Feb 25, 2010 at 17:22

Heinrich Lee Yu

1,48215 silver badges31 bronze badges

Comments

Sampson · Accepted Answer · 2010-02-25 17:26:03Z

1

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();
  });
});

answered Feb 25, 2010 at 17:26

Sampson

269k76 gold badges546 silver badges570 bronze badges

Collectives™ on Stack Overflow

Selecting previous element using jQuery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related