HTMLTableSectionElement.deleteRow() — Methode · JavaScript-Referenz

Signatur

HTMLTableSectionElement.prototype.deleteRow(index)

Beschreibung

Die Methode deleteRow() entfernt eine einzelne Tabellenzeile aus einer Tabellensektion. Die Zeile wird über ihren Index innerhalb der Sektion angegeben, also bezogen auf die Sammlung section.rows und nicht auf die ganze Tabelle.

Ein Index von -1 hat eine Sonderbedeutung: Er entfernt die letzte Zeile der Sektion. Ist die Sektion leer, passiert bei -1 nichts. Andere negative Werte oder Werte ab rows.length lösen eine DOMException vom Typ IndexSizeError aus.

Die Methode eignet sich für dynamische Tabellen, z. B. Warenkörbe, editierbare Listen oder Datentabellen, in denen Einträge per Schaltfläche entfernt werden. Wenn du schon eine Referenz auf das <tr>-Element hast, geht es oft einfacher mit row.remove() oder mit deleteRow(row.sectionRowIndex).

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Nullbasierter Index der zu entfernenden Zeile innerhalb von `section.rows`. `-1` entfernt die letzte Zeile.

Rückgabewert

Typ

void

Beschreibung

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

Beispiele

Erste und letzte Zeile eines tbody entfernen

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

tbody.deleteRow(0);   // entfernt "A"
tbody.deleteRow(-1);  // entfernt die letzte Zeile "C"

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

1 B

Zeile per Löschen-Button entfernen (Event-Delegation)

const tbody = document.querySelector('#warenkorb tbody');

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

  const row = button.closest('tr');
  // sectionRowIndex = Index innerhalb der Sektion, nicht der ganzen Tabelle
  tbody.deleteRow(row.sectionRowIndex);
  console.log(`Verbleibende Positionen: ${tbody.rows.length}`);
});

Verbleibende Positionen: 2

Alle Zeilen einer Sektion leeren

const tbody = document.querySelector('#ergebnisse tbody');

// Von hinten löschen, bis die Sektion leer ist
while (tbody.rows.length > 0) {
  tbody.deleteRow(-1);
}

console.log(tbody.rows.length);

Ungültigen Index abfangen

const tbody = document.querySelector('tbody');

try {
  tbody.deleteRow(99);
} catch (err) {
  console.log(err.name);
}

IndexSizeError

// Wichtig · Fallstricke

Index bezieht sich auf die Sektion: row.rowIndex zählt die Zeilen der ganzen Tabelle, einschließlich <thead>. Für HTMLTableSectionElement.deleteRow() brauchst du row.sectionRowIndex. Mit rowIndex löschst du sonst leicht die falsche Zeile oder bekommst einen IndexSizeError.
Die Sammlung ändert sich live: rows ist eine HTMLCollection, die sich sofort aktualisiert. Wenn du in einer aufsteigenden for-Schleife löschst, rücken die Indizes nach und Zeilen werden übersprungen. Lösche deshalb rückwärts oder mit -1.
Fehlerfälle: Ein Index kleiner als -1 oder größer oder gleich rows.length wirft einen IndexSizeError. -1 bei einer leeren Sektion wirft keinen Fehler.
Kein Parameter: Die Spezifikation verlangt index. Ältere Browser haben den Aufruf ohne Argument teilweise wie 0 behandelt. Übergib den Index deshalb immer ausdrücklich.
Kompatibilität: Wird seit langem von allen gängigen Browsern unterstützt (DOM Level 2 HTML).

Siehe auch

Element.remove() HTMLTableRowElement.deleteCell() HTMLTableSectionElement.insertRow() HTMLTableElement.deleteRow() HTMLTableElement.deleteTFoot()