How To Select First Ancestor That Matches A Selector?

Question

General:

How can I select the first matching ancestor of an element in jQuery?

Example:

Take this HTML block

<

Answer 1

I prefer using closest as @Kobi points out (+1) as it seems to be the most concise way to do that. Just to point out, you can also use parents:

$(this).parents("tr:first")

Answer 2

You can pass a selector to the parent argument I believe.

$('.remove').click(function(){
  $(this).parents("tr:first").hide();
  return false;
});

Or you can use closest as indicated by another answer.

$('.remove').click(function(){
  $(this).closest("tr").hide();
  return false;
});

Answer 3

That would be closest:

$(this).closest('tr').hide();

Answer 4

Assuming you're using jQuery 1.4, you can use .parentsUntil() which will return all of the ancestors upto but NOT including the selected ancestor.

So in your case I would go with something like this:

$('.remove').click(function(){
    $(this).parentsUntil("tr").parent().hide();
    return false;
});