Sumit Dey
Sarkar
24 Aug 2022
JQueryIn this tutorial we will learn how to delete(remove) parent table row (tr) on button click event using jQuery.
Some time we need to delete any single row from a table then we need to use below example to remove a parent table row on button click event using jQuery.
Here we use two different way to delete parent table row on click event using jQuery.
let's see example -
1) How to remove parent table row on button click event using jQuery
<!DOCTYPE html>
<html>
<head>
<title>How To Delete(Remove) Parent Table Row (tr) On Button Click Event Using jQuery</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<th>Sn</th>
<th>Full Name</th>
<th>Email Address</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Hariom Prajapati</td>
<td>hariom@gmail.com</td>
<td><button class="delete-button">Remove</button></td>
</tr>
<tr>
<td>2</td>
<td>Parvez Ahmed</td>
<td>parvez@gmail.com</td>
<td><button class="delete-button">Remove</button></td>
</tr>
<tr>
<td>3</td>
<td>Virat Prajapati</td>
<td>virat@gmail.com</td>
<td><button class="delete-button">Remove</button></td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("body").on("click", ".delete-button", function () {
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>
Output
2) How to remove parent table row on button click event using jQuery
<!DOCTYPE html>
<html>
<head>
<title>How To Delete(Remove) Parent Table Row (tr) On Button Click Event Using jQuery</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<th>Sn</th>
<th>Full Name</th>
<th>Email Address</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Hariom Prajapati</td>
<td>hariom@gmail.com</td>
<td><button class="delete-button">Remove</button></td>
</tr>
<tr>
<td>2</td>
<td>Parvez Ahmed</td>
<td>parvez@gmail.com</td>
<td><button class="delete-button">Remove</button></td>
</tr>
<tr>
<td>3</td>
<td>Virat Prajapati</td>
<td>virat@gmail.com</td>
<td><button class="delete-button">Remove</button></td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("body").on("click", ".delete-button", function () {
$(this).parent().parent().remove();
});
});
</script>
</body>
</html>
Output
