Parent selector in jquery

Question

I have a table row that should be hidden when I click on the anchor with the class "removerow".

<tr><td>Product Name</td><td><a class="removerow">Remove</a></td></tr> 

I tried this, but it does not work:

 $("a.removerow").click(function(){ $(tr > this).hide(); 

});

How can I select the entire row of a table with a child of ".removerow".

What am I doing wrong?

Thanks.

Answer 1

Function

jQuery closest(selector) will move up and return the closest selector.

(If the click of an element matches the specified selector, it returns this.)

http://api.jquery.com/closest/

 $("a.removerow").click(function(e){ $(this).closest('tr').hide(); e.preventDefault(); }); 

e.preventDefault() will disable the default behavior of element a .

Answer 2

jQuery does not have a parent selector, but has a parent function .

In addition, tr is not the direct parent of the link. Instead, it is two levels up ( td is the first parent)

 $("a.removerow").click(function(){ // Called twice (first is td, second is tr) $(this).parent().parent().hide(); }); 

If there are no other tr in the hierarchy, you can also use

 $("a.removerow").click(function(){ // Called twice (first is td, second is tr) $(this).parents('tr').hide(); }); 

If tr has a class on it, you can do this:

 $("a.removerow").click(function(){ // Called twice (first is td, second is tr) $(this).parents('.ClassNameHere').hide(); });