How to remove rows from GridView using jQuery

With continuation with my Grid View series posts,

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.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..