Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to delete a row from a table using jQuery?
In this article, we will learn to delete a row from a table using jQuery. jQuery, a fast and lightweight JavaScript library, Deleting a row from a table dynamically is a common requirement in web development, especially when working with forms or data tables.
Deleting a Row Using jQuery
The approach involves attaching a click event listener to a delete button (or any element) within the row. When the button is clicked, the corresponding row is removed from the table.
Following are the steps for jQuery Script for deleting a row from a table using jQuery?
- The $(document).on('click', 'button.deletebtn', function () { ... }) method is used to attach a click event listener to all buttons with the class deletebtn.
- When a "Delete" button is clicked, the closest() method identifies the closest table row () to the button.
- The remove() method removes the identified row from the DOM.
Below is the jQuery script for deleting a row from a table ?
$(document).on('click', 'button.deletebtn', function () {
if (confirm("Are you sure you want to delete this row?")) {
$(this).closest('tr').remove();
}
});
Firstly, set the delete button ?
<button type="button" class="deletebtn" title="Remove row">X</button>
To fire an event on click of a button, use jQuery on() method ?
$(document).on('click', 'button.deletebtn', function () {
$(this).closest('tr').remove();
return false;
});
Example
Below is an example of deleting a row from a table using jQuery ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = 1;
$("#newbtn").click(function () {
$("table tr:first").clone().find("input").each(function () {
$(this).val('').attr({
'id': function (_, id) {
return id + x
},
'name': function (_, name) {
return name + x
},
'value': ''
});
}).end().appendTo("table");
x++;
});
$(document).on('click', 'button.deletebtn', function () {
$(this).closest('tr').remove();
return false;
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<button type="button" class="deletebtn" title="Remove row">X</button>
</td>
<td>
<input type="text" id="txtTitle" name="txtTitle">
</td>
<td>
<input type="text" id="txtLink" name="txtLink">
</td>
</tr>
</table>
<button id="newbtn">Add new Row</button>
</body>
</html>
Output
By clicking on the X mark you can delete a row 
Conclusion
Deleting a row from a table using jQuery is a straightforward and effective way to enhance user interaction on your web pages. The provided code is simple, reusable, and can be easily customized to fit specific requirements. Whether you're building a form, a data table, or any other dynamic interface, this approach will save you time and effort.
3K+ Views
