Removing rows from HTML table - jQuery
Demo and code for how to remove rows from HTML table using jQuery.
by Athil
Posted on 27 Jun 2018 Category: jQuery
Views: 2450
Here I am going to show how to remove a row from HTML table using jQuery.
DEMO
Demo code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo for remove rows from html table using jQuery</title>
</head>
<body>
<h1>Demo for remove rows from html table using jQuery</h1>
<table id="tbl1" border = "1">
<tr>
<th>Name</th>
<th>Address</th>
<th>Age</th></tr>
<tbody>
<tr><td>Name1</td><td>Address1</td><td>1</td><td><a class="RemoveRow">Remove </a></td></tr>
<tr><td>Name2</td><td>Address2</td><td>2</td><td><a class="RemoveRow">Remove </a></td></tr>
<tr><td>Name3</td><td>Address3</td><td>3</td><td><a class="RemoveRow">Remove </a></td></tr>
<tr><td>Name4</td><td>Address4</td><td>4</td><td><a class="RemoveRow">Remove </a></td></tr>
<tr><td>Name5</td><td>Address5</td><td>5</td><td><a class="RemoveRow">Remove </a></td></tr>
</tbody>
</table>
</body>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
$(document).on('click', 'a.RemoveRow', function () {
$(this).closest('tr').remove();
return false;
});
</script>
</html>