Parent selector in jquery

I have a table row that needs to be hidden when the anchor with class "removerow" is clicked.

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

I've been trying this, but it doesn't work:

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

});

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

W开发者_JAVA百科hat am I doing wrong?

Thanks.

jQuery's closest(selector) function will traverse upward and return the nearest selector provided.

(If the element clicked is the same as the given selector, then it returns that.)

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

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

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

jQuery doesn't have a parent selector, but it does have a parent function.

Also, the tr is not the direct parent of the link. Instead, it's 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 trs in the hierarchy, you could also use

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

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

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