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

<table>     <tbody>         <tr>             <td>                 <a href="#" class="remove">Remove</a>             </td>         </tr>         <tr>             <td>                 <a href="#" class="remove">Remove</a>             </td>         </tr>     </tbody> </table> 

I can remove a row in the table by clicking "Remove" using this jQuery code:

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

This works, but it's pretty fragile. If someone puts the <a> into a <div>, for example, it would break. Is there a selector syntax in jQuery that follows this logic:

"Here's an element, now find the closest ancestor that matches some selection criteria and return it"

Thanks

Answer 1

That would be closest:

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