In this tutorial we will learn how to Delete first row of Table with jQuery. We can use jQuery remove() method along with first() method or :first selector for this purpose.
Table of Contents
jQuery remove() method
jQuery remove() method removes the selected HTML element, content, text or nodes.
In this example remove() method is used to remove the first row of the HTML table.
jQuery first() method
jQuery first() method returns the first HTML element.
In this example first() method will select the first row of table.
jQuery :first selector
jQuery :first selector also selects the first HTML element.
In this example we can also use :first selector in place of first() method to select the first row.
HTML Code
HTML Code is given below, in this code we have a table tag with three rows. HTML button tag is also used to execute a function to delete the first row of table.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Delete first row in Table</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
table,td,tr
{
border: 1px solid black;
margin: 10px 0px;
padding: 5px;
}
table
{
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="table">
<tr>
<td>David</td>
<td>1232</td>
<td>HTML</td>
</tr>
<tr>
<td>Sasha</td>
<td>9689</td>
<td>CSS</td>
</tr>
<tr>
<td>Sam</td>
<td>6534</td>
<td>JavaScript</td>
</tr>
</table>
<button id="btn">Delete First 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').first() will target or select the first row of table.
remove() will then remove this row.
<script>
$(document).ready(function(){
$('#btn').click(function(){
$('#table tr').first().remove();
});
});
</script>
Same example with :first selector.
<script>
$(document).ready(function(){
$('#btn').click(function(){
$('#table tr:first').remove();
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on How To Delete first row of Table using jQuery.