Hide current table row on click using jQuery

Question

I have a bunch of table rows such as:

<tr>
  <td>cell1</td>
  <td>cell2</td>
  <td><a href="action.php">cell3</a></td>
</tr>

When someone clicks the link in cell3 is there a way to hide the whole tr row? So the second they click that link in cell3 the whole tr is hidden?

Answer 1

hi this is my solution

$(document).on("click", "td:nth-child(3)", function () {
      if (confirm("Are you sure ?")) {
          $(this).closest("tr").hide();
      }
  });

Answer 2

Just use simply jQuery and hide the parent.

$('td.hide_on_click').live('click', function(){
  // PICK ONE OF THESE:
  $(this).parent('tr').remove(); //completely destroy the tr (remove from DOM)
  $(this).parent('tr').hide(); //just hide it from the user
});

Remove the a tag. If you want it to have the "link appearance", add a css style for a something clickable:

.clickable {
  cursor: pointer;
  cursor: hand;
}

then:

<table>
  <tr>
    <td></td>
    <td></td>
    <td class="hide_on_click clickable">delete</td>
  </tr>
</table>

Answer 3

This is a good place for .delegate(), like this:

$("#tableID").delegate("td:nth-child(3)", "click", function() {
  $(this).closest("tr").hide();
});

By using .delegate() we attach one click handler to the <table> for all those third-column cells, and then use .closest() to climb up to the <tr> to .hide(). If you want it on the link instead, just change td:nth-child(3) to td a, the rest is the same.