Hide current row of table when clicked using jQuery

Question

I have a number of rows in a table, for example:

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

When someone clicks a link in cell3, is there a way to hide the whole tr line? So, secondly, they click this link in cell 3, and the whole mp is hidden?

Answer 1

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

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

Using .delegate() , we attach a single click handler to the <table> for all these third column boxes, and then use .closest() to go up to <tr> to .hide() . If you want it to link, just change td:nth-child(3) to td a , the rest will be the same.

Answer 2

Just use just 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 tag. If you want it to have a “link appearance”, add a css style for something that you can click:

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

then

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

Answer 3

hi is my decision

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

Answer 4

Yes

 $('td a').click(function() { $(this).parent().parent().hide(); });