HTMLTableElement.deleteCaption() — Methode · JavaScript-Referenz

Signatur

HTMLTableElement.prototype.deleteCaption()

Beschreibung

Die Methode deleteCaption() der Schnittstelle HTMLTableElement entfernt das erste <caption>-Element, das ein direktes Kind der Tabelle ist. Gibt es keine Beschriftung, macht die Methode einfach nichts und wirft auch keinen Fehler.

Sie ist das Gegenstück zu createCaption(). Beide Methoden gehören zu den komfortablen Tabellen-Methoden des DOM, genauso wie createTHead()/deleteTHead() und createTFoot()/deleteTFoot(). Praktisch ist sie überall, wo Tabellen per Skript erzeugt oder umgebaut werden, zum Beispiel wenn eine Tabelle für den Export, zum Drucken oder zum Einbetten ohne Titel ausgegeben werden soll.

Das Ergebnis ist dasselbe wie bei table.caption?.remove(). Der Vorteil von deleteCaption(): Man muss vorher nicht prüfen, ob eine Beschriftung existiert, und im Code ist sofort erkennbar, was gemeint ist.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Das entfernte Element wird nicht zurückgegeben. Wer es weiterverwenden will, sollte es vorher über table.caption speichern.

Beispiele

Beschriftung einer bestehenden Tabelle entfernen

// HTML: <table id="umsatz"><caption>Umsatz 2024</caption><tr><td>100</td></tr></table>
const table = document.querySelector('#umsatz');

console.log(table.caption?.textContent);
table.deleteCaption();
console.log(table.caption);

Umsatz 2024 null

Beschriftung ein- und ausblenden (mit Wiederherstellung)

const table = document.querySelector('table');
let gespeicherteCaption = null;

const toggleCaption = () => {
  if (table.caption) {
    // Element vor dem Löschen merken, da deleteCaption() nichts zurückgibt
    gespeicherteCaption = table.caption;
    table.deleteCaption();
  } else if (gespeicherteCaption) {
    table.caption = gespeicherteCaption; // wird als erstes Kind eingefügt
  }
};

document.querySelector('#toggle-caption')
  .addEventListener('click', toggleCaption);

Sicherer Aufruf ohne vorhandene Beschriftung

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

// Keine caption vorhanden – kein Fehler
table.deleteCaption();
console.log(table.caption);

table.createCaption().textContent = 'Neue Tabelle';
console.log(table.caption.textContent);
table.deleteCaption();
console.log(table.querySelectorAll('caption').length);

null Neue Tabelle 0

// Wichtig · Fallstricke

Es wird nur das erste <caption>-Element entfernt, das direktes Kind der Tabelle ist. Ungültiges Markup mit mehreren Beschriftungen braucht also mehrere Aufrufe. Beschriftungen in verschachtelten Tabellen bleiben unberührt.
Die Methode gibt nichts zurück. Wer die Beschriftung später wieder einfügen will, muss sie vorher über table.caption speichern.
Barrierefreiheit: Die <caption> ist der zugängliche Name der Tabelle für Screenreader. Soll sie nur optisch verschwinden, lieber per CSS visuell verstecken, statt sie zu löschen, oder alternativ aria-label setzen.
Kompatibilität: Die Methode wird seit DOM Level 1 in allen Browsern unterstützt, ohne Einschränkungen.

Siehe auch

Element.remove() HTMLTableElement.createCaption() HTMLTableElement.deleteRow() HTMLTableElement.deleteTFoot() HTMLTableElement.deleteTHead()