[Solved] Hide current table row on click using jQuery

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?

Enquirer: John

||

Solution #1:

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.

Respondent: Nick Craver

Solution #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>
Respondent: sethvargo

Solution #3:

hi this is my solution

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

Solution #4:

Yup

$('td a').click(function() {
    $(this).parent().parent().hide();
});
Respondent: Marcus Whybrow

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.