Delete Row from HTML Table by clicking it using jQuery

delete-row-table-javascript-jquery
jQuery has became one of the most used and most loved JavaScript framework of all time. It not only does reduce the overhead in coding simple techniques in JavaScript, but also make your code cross browser compatible. I have written many tutorials on jquery and this time also I came with this simple plain implementation. The task is to remove the rows from a HTML table using some funky effects just by clicking the row.

 

Following is the jQuery code to achieve this.

$(document).ready(function() {
	$("#sample tr").click(function() {
		//change the background color to red before removing
		$(this).css("background-color","#FF3700");

		$(this).fadeOut(400, function(){
			$(this).remove();
		});
	});
});

In above code we have attached handler with all “tr” in “#sample” table. On click we are first changing the background of the row and then fade it out and remove it. This is such a simple task.

Online Demo

Get our Articles via Email. Enter your email address.

You may also like...

8 Comments

  1. i have done the similar thing:

    http://sarfraznawaz.wordpress.com/2009/09/14/deleting-table-rows-using-jquery-and-php/

  2. khoa says:

    so cool. thanks so much

  3. John says:

    Nice Tutorial . .There’s a similar Deletion via Ajax here :
    http://youhack.me/2010/03/26/remove-data-in-a-div-after-successfully-deleted-using-jquery/
    This one displays data in a tabular fashion using css and not

  4. Julian says:

    Interesting approach. Thanks.

  5. Jorge says:

    Great.
    Do you know how to remove rows by clicking it, which was just appended by:
    $(“#add_sample_item”).click(function() {
    $(‘#sample’).append(‘ a b c ‘);
    });
    Thanks, Jorge

  6. thanks for help me

  7. ramesh says:

    how to insert the data in table answer display on a webpage

  8. Abdul Mannan says:

    Thanks a lot to share…………

Leave a Reply

Your email address will not be published. Required fields are marked *