This post is about removing a table row on user click. I needed this functionality for a project of mine. Online application had a table with data that user can dynamically add and remove. With progressive enhancement I also need to add a functionality to one of the tables that enables users to delete table rows when that table row is clicked.
jQuery code to delete clicked table row came out to be surprisingly short, only 3 lines of code.
// Select all table cells to bind a click event $('table td').click(function(){ $(this).parent().remove(); });
Here, we are first selecting all table cells to bind our click event. On user click to any table cell click
event fires. In the click event we are removing <td>
’s parent, which is <tr>
, thus removing whole row.
By popular user demand I’m including an example that lets deleting a table row on delete image click. Here is our HTML table:
<table> <tr> <td>row 1, cell 1</td> <td><img class="delete" src="del.gif" /></td> </tr> <tr> <td>row 2, cell 1</td> <td><img class="delete" src="del.gif" /></td> </tr> </table>
Here is jQuery code to delete a row on delete image click:
$('table td img.delete').click(function(){ $(this).parent().parent().remove(); });
See demos here.
Bonus: Also delete a table row from database
The code above is enough if you don’t need to also delete a record from your database table. In my case I had to set up a server side code to do that. With one extra AJAX call to my server side script the functionality was ready.
$('table td').click(function(){ $.get('deleteRow.php', {id: $(this).parent().attr('id')}, function(){ $(this).parent().remove(); }); });
In the jQuery code above, instead of removing table row straight away we are making an AJAX call to our server side code that also removes that row from our database and then on AJAX call completion we removing table row.
Great sample code and a nice example. It was just what I needed to know.
ReplyDeleteYep, it's simple and easy. I would only add a function to update the "rows" attribute of the table element if present. I'm not a coder, so figure it out if you want. I'd like to see how it could be done :)
ReplyDeleteHi. In some cases there maybe got table inside table. So $('table tr').click() will also bind to tr in the inner table. Using $('table > tbody > tr').click() solved.
ReplyDeleteI tried the BONUS codesample above but I can't get it to work, when I do this:
ReplyDelete$('table td').click(function(){
$.get('deleteRow.php', {id: $(this).attr('id')},
function(){
alert($(this).attr('id'));
});
});
the response is 'undefined', what am I doing wrong??
Do you know what the selector would be for selecting a table by ID? for this example????
ReplyDeleteYou saved me loads of time! Thank you..
ReplyDelete-sherry
How do you pass the ID from the image to the PHP file with the AJAX call? I assume some html editing is required so that it knows which ID to delete from the DB table?
ReplyDeleteHello I have just come across this snippet of code and it looks exactly what i want. My problem is that I cannot get it work.
ReplyDeleteEverything looks correct, the only difference is that my table is dynamically built and filled form a previous ajax call. I though that wouyld make no difference.
Any help would be appreciated
thankzzz for the code it proves very helpful to me. . :-) :-) :-)
ReplyDeleteHey That was really a nice piece of help. I am a newby in jquery. You have kept that simple. Thanks
ReplyDeleteHow will you stop header and footer from getting removed?
ReplyDeleteHi. As far as I know, it is not a best practice to perform a change on the database by a GET request. I think it would be better to use the $.post() function instead of $.get().
ReplyDeletewhat should php script look like?
ReplyDeletehi, great script. It's just what I needed.
ReplyDeleteCould you please show what do you have in the deleteRow.php file?
Thanks