Learning jQuery

Formatting ASP.NET GridView using jQuery
Highlight row on mouseover in GridView using jQuery

In this post, I will show you how to remove any row in grid view 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. 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.]

Feel free to contact me for any help related to jQuery, I will gladly help you.