[Solved] Hide current table row on click using jQuery

I have a bunch of table rows such as:

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

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() {

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(){
  $(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;


    <td class="hide_on_click clickable">delete</td>
Respondent: sethvargo

Solution #3:

hi this is my solution

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

Solution #4:


$('td a').click(function() {
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.