HTMLTableRowElement: deleteCell() 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 deleteCell()
method of the HTMLTableRowElement
interface removes a
specific row cell from a given <tr>
.
Syntax
js
deleteCell(index)
Parameters
index
-
The cell index of the cell to remove. If
index
is-1
or equal to the number of cells, the last cell of the row is removed.
Return value
None (undefined
).
Exceptions
IndexSizeError
DOMException
-
Thrown if
index
is greater than the number of cells or if it is smaller than-1
.
Examples
This example uses HTMLTableRowElement.insertCell()
to append a new cell to a
row.
HTML
html
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
<th>C5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
<button id="add">Add a cell</button>
<button id="remove">Remove last cell</button>
<div>This first row has <output>2</output> cell(s).</div>
JavaScript
js
// Obtain relevant interface elements
const bodySection = document.querySelectorAll("tbody")[0];
const row = bodySection.rows[0]; // Select the first row of the body section
const cells = row.cells; // The collection is live, therefore always up-to-date
const cellNumberDisplay = document.querySelectorAll("output")[0];
const addButton = document.getElementById("add");
const removeButton = document.getElementById("remove");
function updateCellNumber() {
cellNumberDisplay.textContent = cells.length;
}
addButton.addEventListener("click", () => {
// Add a new cell at the end of the first row
const newCell = row.insertCell();
newCell.textContent = `Cell ${cells.length}`;
// Update the row counter
updateCellNumber();
});
removeButton.addEventListener("click", () => {
// Delete the row from the body
row.deleteCell(-1);
// Update the row counter
updateCellNumber();
});
Result
Specifications
Specification |
---|
HTML Standard # dom-tr-deletecell |
Browser compatibility
BCD tables only load in the browser
See also
HTMLTableElement.insertRow()
- The HTML element representing cells:
HTMLTableCellElement