How to remove table row using jQuery
In this tutorial, we are going to remove a row from the table using JQuery. JQuery provides the closest() method, it will return the closest element and remove() method, it will remove the selected elements.
In my example, I have some data arranged in the table and I will remove the selected row from the table.
JS Snippet
function removeMe(that) {
$(that).closest('tr').remove();
}Check the full example.
<!DOCTYPE html>
<html>
<head>
<title>How to remove table row using jQuery</title>
<style>
table {border-collapse: collapse;width: 60%;}
th, td {padding: 8px;text-align: left;border-bottom: 1px solid #ddd;}
</style>
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function removeMe(that) {
$(that).closest('tr').remove();
}
</script>
</head>
<body>
<h1>How to remove table row using jQuery</h1>
<div>
<table>
<thead>
<tr>
<th>Emp. ID</th>
<th>Emp. Name</th>
<th>Department</th>
<th>Designation</th>
<th>Salary</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>WS-1</td>
<td>Sandeep Sharma</td>
<td>Information Technology</td>
<td>JavaScript Developer</td>
<td>20000</td>
<td><button onclick="removeMe(this);">Remove Me</button></td>
</tr>
<tr>
<td>WS-2</td>
<td>Anuj Singh</td>
<td>Information Technology</td>
<td>Software Engineer</td>
<td>16000</td>
<td><button onclick="removeMe(this);">Remove Me</button></td>
</tr>
<tr>
<td>WS-3</td>
<td>Sangeeta</td>
<td>Sales</td>
<td>Sales Manager</td>
<td>30000</td>
<td><button onclick="removeMe(this);">Remove Me</button></td>
</tr>
<tr>
<td>WS-4</td>
<td>Ankita Rai</td>
<td>Pharmacy</td>
<td>Quality Analyst</td>
<td>22000</td>
<td><button onclick="removeMe(this);">Remove Me</button></td>
</tr>
<tr>
<td>WS-5</td>
<td>Anand Maurya</td>
<td>Production</td>
<td>Security Incharge</td>
<td>10000</td>
<td><button onclick="removeMe(this);">Remove Me</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Similar Posts
About the Author
