Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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, makes DOM manipulation simple. Deleting a row from a table dynamically is a common requirement in web development, especially when working with forms or data tables.
Approach to Delete Rows
The approach involves attaching a click event listener to a delete button within the row. When the button is clicked, the corresponding row is removed from the table using jQuery methods.
Key jQuery Methods Used
- The
$(document).on('click', 'button.deletebtn', function () { ... })method attaches a click event listener to all buttons with the classdeletebtn - When a "Delete" button is clicked, the closest() method identifies the closest table row (
<tr>) to the button - The remove() method removes the identified row from the DOM
Basic Syntax
$(document).on('click', 'button.deletebtn', function () {
if (confirm("Are you sure you want to delete this row?")) {
$(this).closest('tr').remove();
}
});
Setting Up the Delete Button
First, create the delete button in your table row:
<button type="button" class="deletebtn" title="Remove row">X</button>
Complete Example
Below is a complete example showing how to delete rows 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>
<style>
table { border-collapse: collapse; width: 100%; }
td { border: 1px solid #ddd; padding: 8px; }
.deletebtn { background: red; color: white; border: none; padding: 5px 10px; cursor: pointer; }
</style>
<script>
$(document).ready(function(){
var x = 1;
// Add new row functionality
$("#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++;
});
// Delete row functionality
$(document).on('click', 'button.deletebtn', function () {
if (confirm("Are you sure you want to delete this row?")) {
$(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" placeholder="Enter title">
</td>
<td>
<input type="text" id="txtLink" name="txtLink" placeholder="Enter link">
</td>
</tr>
</table>
<br>
<button id="newbtn">Add New Row</button>
</body>
</html>
How It Works
-
Event Delegation: Using
$(document).on('click', 'button.deletebtn', ...)ensures the event works for dynamically added rows -
Row Selection:
$(this).closest('tr')finds the table row containing the clicked delete button -
Confirmation: The
confirm()dialog prevents accidental deletions -
DOM Removal:
.remove()completely removes the row from the DOM
Alternative Without Confirmation
For immediate deletion without confirmation:
$(document).on('click', 'button.deletebtn', function () {
$(this).closest('tr').remove();
return false;
});
Conclusion
Deleting table rows with jQuery is straightforward using event delegation and the closest() method. This approach works for both static and dynamically added rows, making it perfect for interactive web applications.
3K+ Views
