How to remove rows from GridView using jQuery in asp.net

In this post, I will show you how to remove any row in gridview using jQuery. The task is pretty simple. One need to bind the click event with every tr which has only td not th and on click of event remove the clicked row. 

Previous Post  I was Explained about the  jQuery - Allow Alphanumeric (Alphabets & Numbers) Characters in Textbox using JavaScript , Fileupload show selected file in label when file selected , Check for file size with JavaScript before uploading, Show jQuery UI Dialog Popup Window from Server Side ( Code Behind ) in ASP.Net , How to use the window.open()  method ,  CONFIRMATION BOX WITH YES NO BUTTONS USING AJAX MODAL POPUP EXTENDER IN ASP.NET

See below jQuery code.

$(document).ready(function() {

$("#<%=gdRows.ClientID%> tr:has(td)").click(function() {

$(this).remove();

});

});

Aha..How simple it is..Isn't it? But it would be nice if we show the remove row effect using some animation for better user experience. Well, not to worry when there is jQuery.

 See below jQuery code.

$(document).ready(function() {

$("#<%=gdRows.ClientID%> tr:has(td)").click(function() {

$(this).fadeOut(1000, function() {

$(this).remove();

});

});

});

[Note: This jQuery code handles only Client Side Updates, not server side. You still need to server side code to delete the row permanently.]