Question

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

What am I doing wrong?

Thanks.

Answer 1

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.