HTMLTableElement.deleteRow() — Methode · JavaScript-Referenz

Signatur

HTMLTableElement.prototype.deleteRow(index)

Beschreibung

Die Methode deleteRow() des Interfaces HTMLTableElement entfernt eine einzelne Tabellenzeile anhand ihrer Position. Die Position bezieht sich auf die Sammlung table.rows. Diese enthält alle Zeilen der Tabelle, also auch die aus <thead>, <tbody> und <tfoot>, und zwar in der Reihenfolge, in der sie im Dokument stehen.

Die Methode eignet sich für dynamische Tabellen, etwa wenn ein Eintrag aus einer Datenliste gelöscht, eine Warenkorb-Position entfernt oder die älteste Zeile eines Protokolls abgeschnitten werden soll. Der Sonderwert -1 steht für die letzte Zeile. So kann man Zeilen vom Ende her entfernen, ohne vorher die Länge zu berechnen.

Wichtig: Die Indizes verschieben sich nach jedem Löschen, denn rows ist eine live-Sammlung. Wer mehrere Zeilen in einer Schleife löscht, sollte deshalb rückwärts zählen. Wer nur die Zeilen eines bestimmten Abschnitts ansprechen will, verwendet besser HTMLTableSectionElement.deleteRow() auf dem jeweiligen <tbody>.

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Position der zu löschenden Zeile in `table.rows` (ab 0 gezählt). `-1` steht für die letzte Zeile. Werte kleiner als `-1` oder größer als bzw. gleich `rows.length` lösen eine `IndexSizeError`-`DOMException` aus.

Rückgabewert

Typ

void

Beschreibung

Gibt undefined zurück. Die Zeile wird direkt aus dem DOM entfernt.

Beispiele

Letzte und erste Zeile entfernen

// HTML: <table id="daten"><tr><td>A</td></tr><tr><td>B</td></tr><tr><td>C</td></tr></table>
const table = document.getElementById('daten');

table.deleteRow(-1); // entfernt „C“
table.deleteRow(0);  // entfernt „A“

console.log(table.rows.length, table.rows[0].textContent);

1 B

Zeile per Löschen-Button entfernen

// Jede Zeile enthält einen <button class="loeschen">
const table = document.querySelector('#warenkorb');

table.addEventListener('click', (event) => {
  const button = event.target.closest('button.loeschen');
  if (!button) return;

  const row = button.closest('tr');
  // rowIndex bezieht sich auf table.rows – passt also zu deleteRow()
  table.deleteRow(row.rowIndex);
});

Alle Datenzeilen außer dem Kopf löschen (rückwärts)

const table = document.querySelector('#protokoll');
const headerRows = table.tHead ? table.tHead.rows.length : 0;

// Rückwärts löschen, da sich die Indizes der live-Sammlung verschieben
for (let i = table.rows.length - 1; i >= headerRows; i--) {
  table.deleteRow(i);
}

console.log(`Verbleibende Zeilen: ${table.rows.length}`);

Verbleibende Zeilen: 1

Fehlerbehandlung bei ungültigem Index

const table = document.createElement('table');
table.insertRow().insertCell().textContent = 'Einzige Zeile';

try {
  table.deleteRow(5);
} catch (err) {
  console.log(err.name);
}

IndexSizeError

// Wichtig · Fallstricke

Index über alle Abschnitte: Der Index zählt die Zeilen aus <thead>, <tbody> und <tfoot> gemeinsam. Mit deleteRow(0) löscht man also meist die Kopfzeile und nicht die erste Datenzeile.
Live-Sammlung: Nach jedem Löschen rücken die nachfolgenden Zeilen nach. Beim Löschen mehrerer Zeilen deshalb von hinten nach vorne zählen.
Leere Tabelle: deleteRow(-1) auf einer Tabelle ohne Zeilen macht laut Spezifikation nichts und löst keinen Fehler aus. Ältere Browser konnten hier abweichen.
Parameter weglassen: Den Parameter immer angeben. Ältere Firefox-Versionen verlangten ihn zwingend.
Alternativ entfernt row.remove() eine bereits bekannte Zeile direkt, ohne dass man einen Index braucht.
Kompatibilität: Die Methode wird seit Jahren von allen gängigen Browsern unterstützt.

Siehe auch

Element.remove() HTMLTableElement.deleteTFoot() HTMLTableElement.deleteTHead() HTMLTableElement.insertRow() HTMLTableElement.deleteCaption()