CharacterData.remove() — Methode · JavaScript-Referenz

Signatur

CharacterData.prototype.remove()

Beschreibung

Die Methode remove() stammt aus dem Mixin ChildNode und steht allen CharacterData-Knoten zur Verfügung, also Text, Comment, CDATASection und ProcessingInstruction. Sie hängt den Knoten direkt aus seinem Elternknoten aus. Den Elternknoten müssen Sie dafür nicht kennen.

Früher schrieb man dafür node.parentNode.removeChild(node). Hat der Knoten keinen Elternknoten, wirft dieser Aufruf einen Fehler. remove() ist kürzer und macht in diesem Fall einfach nichts, es wird also kein Fehler geworfen.

Typische Einsatzfälle: überflüssige Leerraum-Textknoten zwischen Elementen löschen, HTML-Kommentare aus dem ausgelieferten Markup entfernen oder Textfragmente beim Umbauen von Inhalten wegnehmen. Der entfernte Knoten wird nicht zerstört. Solange Sie eine Referenz darauf halten, können Sie ihn später wieder einfügen, z. B. mit appendChild() oder before().

Beispiele

Einen Textknoten entfernen

const p = document.createElement('p');
p.append('Hallo ', document.createElement('strong'), ' Welt');

const ersterText = p.firstChild; // Textknoten "Hallo "
ersterText.remove();

console.log(p.innerHTML);

<strong></strong> Welt

Alle HTML-Kommentare aus einem Bereich entfernen

const container = document.createElement('div');
container.innerHTML = '<!-- TODO --><p>Inhalt</p><!-- Debug-Info -->';

const walker = document.createTreeWalker(container, NodeFilter.SHOW_COMMENT);
const kommentare = [];
while (walker.nextNode()) kommentare.push(walker.currentNode);

// Erst sammeln, dann entfernen – sonst gerät der TreeWalker durcheinander
kommentare.forEach((c) => c.remove());

console.log(container.innerHTML);

<p>Inhalt</p>

Leerraum-Textknoten zwischen Listeneinträgen bereinigen

const ul = document.createElement('ul');
ul.innerHTML = `
  <li>A</li>
  <li>B</li>
`;

console.log('Vorher:', ul.childNodes.length);

[...ul.childNodes]
  .filter((n) => n.nodeType === Node.TEXT_NODE && !n.data.trim())
  .forEach((n) => n.remove());

console.log('Nachher:', ul.childNodes.length);

Vorher: 5 Nachher: 2

Aufruf ohne Elternknoten ist gefahrlos

const text = document.createTextNode('frei');
text.remove(); // kein Fehler, obwohl der Knoten keinen Elternknoten hat
console.log(text.parentNode);

null

// Wichtig · Fallstricke

Live-Listen: childNodes ist eine Live-NodeList. Entfernen Sie Knoten nicht, während Sie mit einem Index darüber iterieren, sonst werden Einträge übersprungen. Kopieren Sie die Liste vorher, z. B. mit [...node.childNodes], oder sammeln Sie die Knoten zuerst.
Referenzen bleiben gültig: Der Knoten wird nur ausgehängt, nicht freigegeben. Hält Ihr Code noch Referenzen darauf, wird der Speicher nicht freigegeben.
Kein Fehler ohne Elternknoten: Anders als removeChild() tut remove() bei einem Knoten ohne Elternknoten einfach nichts.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Internet Explorer kennt die Methode nicht. Dort brauchen Sie parentNode.removeChild(node) oder ein Polyfill.
Nachbar-Textknoten: Wenn Sie einen Knoten entfernen, werden die benachbarten Textknoten nicht automatisch zusammengeführt. Das erledigt bei Bedarf Node.prototype.normalize().

Siehe auch

Element.remove() Node.normalize() CharacterData.before() CharacterData.after() CharacterData.deleteData()