Today I am going to tell you how to delete multiple rows from table with jquery with few lines of code. I hope this tutorial will be really useful in your web projects during handling data’s rendering in table. Deleting single row in table is painful when you have more rows, this simple jquery code will able to help deleting multiple rows from html table.

Delete multiple rows from table with jQuery
Removing multiple rows from a table with jQuery

Features

  • Delete single row from a table
  • Delete multiple row from a table with validation
  • Check all & Uncheck all checkboxes using jQuery

Step 1: Install Latest JQuery Code

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Check all & Uncheck all Function in jQuery

function toggleChecked(status) {
  $(".checkbox").each( function() {
  	$(this).attr("checked",status);
  })
}

Step 2: Code to Delete Single Row from a table with jQuery

$('a.delete_single').on("click", function(event){
		var $this = $(this);
		var c = confirm('Are you sure to delete this message?');
		   if(c) {
			$this.parents('tr').fadeOut(function(){
			$this.remove();
		   });
		}
		return false;
});

Step 3: Code to Delete Multiple Rows from table with jQuery

$('.deleteall').on("click", function(event){
	var tb = $(this).attr('title');
	var sel = false;
	var ch = $('#'+tb).find('tbody input[type=checkbox]');
	var c = confirm('Continue delete?');
	if(c) {
	  ch.each(function(){
		 var $this = $(this);
			if($this.is(':checked')) {
			        sel = true;	//set to true if there is/are selected row
				$this.parents('tr').fadeOut(function(){
				$this.remove(); //remove row when animation is finished
				});
			}
	  });
		  if(!sel) alert('No data selected');
	}
	return false;
});

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

Related Posts