Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Table deleteRow() Method
The HTML DOM table deleteRow() method removes a specific row (<tr> element) from a table. This method is useful for dynamically managing table content in web applications.
Syntax
Following is the syntax for the deleteRow() method −
table.deleteRow(index)
Parameters
The method accepts one parameter −
-
index − An integer that specifies the position of the row to delete. The index starts from 0. If the index is -1, it deletes the last row. If the index is out of range, an error occurs.
Return Value
This method does not return any value. It simply removes the specified row from the table.
How It Works
The deleteRow() method counts all rows in the table including header (<thead>), body (<tbody>), and footer (<tfoot>) rows. Row indexing starts from 0, where 0 is the first row of the entire table.
Example − Deleting a Specific Row
Following example demonstrates how to delete a specific row from a table −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM deleteRow() Method</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Student Records</h2>
<table id="studentTable" border="1" style="margin: 20px auto; border-collapse: collapse;">
<thead>
<tr style="background-color: #f0f0f0;">
<th style="padding: 8px;">Name</th>
<th style="padding: 8px;">Roll No.</th>
<th style="padding: 8px;">Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px;">John</td>
<td style="padding: 8px;">071717</td>
<td style="padding: 8px;">A</td>
</tr>
<tr>
<td style="padding: 8px;">Jane</td>
<td style="padding: 8px;">031717</td>
<td style="padding: 8px;">B</td>
</tr>
<tr>
<td style="padding: 8px;">Bob</td>
<td style="padding: 8px;">051717</td>
<td style="padding: 8px;">A</td>
</tr>
</tbody>
</table>
<button onclick="deleteFirstRow()" style="margin: 5px; padding: 8px 16px;">Delete Row 1</button>
<button onclick="deleteLastRow()" style="margin: 5px; padding: 8px 16px;">Delete Last Row</button>
<script>
function deleteFirstRow() {
var table = document.getElementById("studentTable");
if (table.rows.length > 1) {
table.deleteRow(1); // Delete first data row (index 1)
}
}
function deleteLastRow() {
var table = document.getElementById("studentTable");
if (table.rows.length > 1) {
table.deleteRow(-1); // Delete last row
}
}
</script>
</body>
</html>
The table initially shows three student records. Clicking "Delete Row 1" removes John's record (first data row), and "Delete Last Row" removes the last remaining row −
Initial table: Name | Roll No. | Grade John | 071717 | A Jane | 031717 | B Bob | 051717 | A After clicking "Delete Row 1": Name | Roll No. | Grade Jane | 031717 | B Bob | 051717 | A
Example − Dynamic Row Deletion
Following example shows how to delete rows dynamically with user input −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Row Deletion</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Product Inventory</h2>
<table id="productTable" border="1" style="margin: 20px auto; border-collapse: collapse;">
<thead>
<tr style="background-color: #e6f3ff;">
<th style="padding: 10px;">Product</th>
<th style="padding: 10px;">Price</th>
<th style="padding: 10px;">Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px;">Laptop</td>
<td style="padding: 8px;">$999</td>
<td style="padding: 8px;">15</td>
</tr>
<tr>
<td style="padding: 8px;">Mouse</td>
<td style="padding: 8px;">$25</td>
<td style="padding: 8px;">50</td>
</tr>
<tr>
<td style="padding: 8px;">Keyboard</td>
<td style="padding: 8px;">$75</td>
<td style="padding: 8px;">30</td>
</tr>
</tbody>
</table>
<p>
<input type="number" id="rowIndex" placeholder="Row index (1-based)" min="1" style="padding: 5px;">
<button onclick="deleteSpecificRow()" style="padding: 8px 16px; margin-left: 10px;">Delete Row</button>
</p>
<p id="message" style="color: red; font-weight: bold;"></p>
<script>
function deleteSpecificRow() {
var table = document.getElementById("productTable");
var input = document.getElementById("rowIndex");
var message = document.getElementById("message");
var rowIndex = parseInt(input.value);
if (isNaN(rowIndex) || rowIndex < 1) {
message.textContent = "Please enter a valid row number (starting from 1)";
return;
}
if (rowIndex >= table.rows.length) {
message.textContent = "Row " + rowIndex + " does not exist";
return;
}
table.deleteRow(rowIndex); // Convert to 0-based index
message.style.color = "green";
message.textContent = "Row " + rowIndex + " deleted successfully";
input.value = "";
}
</script>
</body>
</html>
Users can enter a row number (1-based) to delete that specific row. The script validates the input and provides feedback messages for successful deletions or errors.
Key Points
-
The deleteRow() method removes the entire
<tr>element from the DOM. -
Row indexing starts from 0 and includes all table rows (header, body, and footer).
-
Using index -1 deletes the last row in the table.
-
The method throws an error if the specified index is out of range.
-
Always check if the table has rows before attempting to delete to avoid errors.
Common Use Cases
-
Dynamic data management − Removing items from shopping carts, todo lists, or inventory tables.
-
User interface cleanup − Allowing users to delete unwanted table entries.
-
Form validation − Removing invalid entries from dynamic forms.
-
Real-time updates − Reflecting server-side deletions in client-side tables.
Conclusion
The HTML DOM deleteRow() method provides a simple way to remove table rows dynamically. Remember that row indexing starts from 0 and includes all table sections. Always validate the index parameter to prevent errors when deleting rows from tables in your web applications.
179 Views
