Search code examples
jquery

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.

What am I doing wrong?

Thanks.

Solution

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