In this tutorial we will learn how to Delete last row of Table with jQuery. For this we can use jQuery remove() method along with last() method or :last selector.
Table of Contents
jQuery remove() method
jQuery remove() method deletes or removes the selected HTML element, content, text or nodes.
In this example remove() method is used to remove the last row of the HTML table.
jQuery last() method
jQuery last() method returns the last HTML element.
In this example last() method will select the last row of table.
jQuery :last selector
jQuery :last selector also selects the last HTML element.
In this example we can also use :last selector instead of last() method to select the last row.
HTML Code
HTML Code is given below, in this code we have a table tag with four rows, a button tag is also used to execute a function to delete only last row.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Delete last row of Table</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
table,tr,th,td
{
border: 1px solid black;
margin: 10px 0px;
padding: 5px;
}
table
{
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="table">
<tr>
<th>Name</th>
<th>Contact</th>
<th>Language</th>
</tr>
<tr>
<td>Jake</td>
<td>9232</td>
<td>HTML</td>
</tr>
<tr>
<td>Sara</td>
<td>8345</td>
<td>CSS</td>
</tr>
<tr>
<td>John</td>
<td>4566</td>
<td>JavaScript</td>
</tr>
</table>
<button id="btn">Delete Last Row</button>
<script src="script.js"></script>
</body>
</html>
JQuery Code
JQuery Code is given below, jQuery click() method is used to trigger a function on a click of button.
$('#btn') is an id selector used to select the button tag.
$('#table tr').last() will target or select the last row of table.
remove() will then remove this row.
<script>
$(document).ready(function(){
$('#btn').click(function(){
$('#table tr').last().remove();
});
});
</script>
Same example with :last selector in place of last() method.
<script>
$(document).ready(function(){
$('#btn').click(function(){
$('#table tr:last').remove();
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on How To Delete last row of Table using jQuery.