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⁩.

ThedeleteRow() method of theHTMLTableSectionElement interface removes aspecific 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 ofthe section.

Return value

None (undefined).

Exceptions

IndexSizeErrorDOMException: Thrown ifindex 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 an<output> element with the number of rows currently in the table.

HTML

html

<table>  <thead>    <tr>      <th>Col 1</th>      <th>Col 2</th>      <th>Col 3</th>    </tr>  </thead>  <tbody>    <tr>      <td>X</td>      <td>Y</td>      <td>Z</td>    </tr>  </tbody></table><button>Add a row</button><button>Remove last row</button><div>This table's body has <output>1</output> row(s).</div>

table {  border-collapse: collapse;}th,td {  border: 1px solid black;}button {  margin: 1em 1em 1em 0;}

JavaScript

// Obtain relevant interface elementsconst bodySection = document.querySelectorAll("tbody")[0];const rows = bodySection.rows; // The collection is live, therefore always up-to-dateconst 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();});