HTMLTableSectionElement: deleteRow() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The deleteRow()
method of the HTMLTableSectionElement
interface removes a
specific row (<tr>
) from a given <section>
.
Syntax
deleteRow(index)
Parameters
index
-
index
is an integer representing the row that should be deleted. However, the special index-1
can be used to remove the very last row of the section.
Return value
None (undefined
).
Exceptions
IndexSizeError
DOMException
-
Thrown if
index
is greater than or equal to the number of available rows or is a negative value other than-1
.
Examples
In this example, two buttons allow you to add and remove rows from the table body section; it also updates a <output>
element with the number of rows currently in the table.
HTML
<table>
<thead>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</thead>
<tbody>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</tbody>
</table>
<button id="add">Add a row</button>
<button id="remove">Remove last row</button>
<div>This table's body has <output>1</output> row(s).</div>
JavaScript
// Obtain relevant interface elements
const bodySection = document.querySelectorAll("tbody")[0];
const rows = bodySection.rows; // The collection is live, therefore always up-to-date
const rowNumberDisplay = document.querySelectorAll("output")[0];
const addButton = document.getElementById("add");
const removeButton = document.getElementById("remove");
function updateRowNumber() {
rowNumberDisplay.textContent = rows.length;
}
addButton.addEventListener("click", () => {
// Add a new row at the end of the body
const newRow = bodySection.insertRow();
// Add cells inside the new row
["A", "B", "C"].forEach(
(elt) => (newRow.insertCell().textContent = `${elt}${rows.length}`),
);
// Update the row counter
updateRowNumber();
});
removeButton.addEventListener("click", () => {
// Delete the row from the body
bodySection.deleteRow(-1);
// Update the row counter
updateRowNumber();
});
Result
Specifications
Specification |
---|
HTML # dom-tbody-deleterow |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
deleteRow |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support