Element.remove() — Methode · JavaScript-Referenz

Signatur

Element.prototype.remove()

Beschreibung

remove() löst ein Element direkt aus dem Dokumentbaum, ohne dass man vorher den Elternknoten ermitteln muss. Früher schrieb man dafür el.parentNode.removeChild(el). remove() ist kürzer, besser lesbar und wirft keinen Fehler, wenn das Element gar keinen Elternknoten hat. In diesem Fall bewirkt der Aufruf einfach nichts.

Die Methode stammt aus dem Mixin ChildNode. Deshalb gibt es sie nicht nur für Element, sondern auch für CharacterData (Text, Comment) und DocumentType. Das Element wird zusammen mit allen Nachfahren entfernt.

Wichtig: Das Element wird dabei nicht zerstört. Solange noch eine Referenz darauf besteht, bleibt es im Speicher erhalten und kann später mit append(), insertBefore() o. Ä. wieder eingefügt werden. Mit addEventListener registrierte Event-Listener und gesetzte Eigenschaften bleiben dabei bestehen. Erst wenn keine Referenz mehr existiert, kann der Garbage Collector das Element freigeben.

Typische Einsatzfälle sind das Schließen von Benachrichtigungen und Dialogen, das Löschen von Listeneinträgen, das Aufräumen dynamisch erzeugter Elemente (Tooltips, Overlays, temporäre <script>-Tags) und das Entfernen gefilterter Elemente aus einer Liste.

Rückgabewert

Typ

void

Beschreibung

Gibt undefined zurück. Anders als removeChild() liefert remove() das entfernte Element nicht zurück.

Beispiele

Benachrichtigung per Klick schließen

// HTML: <div class="toast">Gespeichert! <button class="close">×</button></div>
document.querySelectorAll('.toast .close').forEach((btn) => {
  btn.addEventListener('click', () => {
    // Das umschließende Toast-Element entfernen
    btn.closest('.toast')?.remove();
  });
});

Alle erledigten Einträge einer Liste entfernen

// HTML: <ul id="todos"><li class="done">A</li><li>B</li><li class="done">C</li></ul>
const list = document.getElementById('todos');

// querySelectorAll liefert eine statische NodeList, daher ist das Entfernen in der Schleife sicher
list.querySelectorAll('li.done').forEach((li) => li.remove());

console.log(list.children.length);

1

Element entfernen und später wieder einfügen

const banner = document.createElement('div');
banner.textContent = 'Wartungsarbeiten heute Abend';
banner.addEventListener('click', () => console.log('Banner geklickt'));
document.body.append(banner);

banner.remove();
console.log(banner.isConnected); // nicht mehr im DOM

// Die Referenz lebt weiter, der Listener bleibt erhalten
document.body.prepend(banner);
console.log(banner.isConnected);

// Ein erneuter Aufruf auf ein bereits entferntes Element ist harmlos
banner.remove();
banner.remove();

false true

Temporäres Overlay nach einer Zeitspanne entfernen

const showOverlay = (text, ms = 2000) => {
  const overlay = document.createElement('div');
  overlay.className = 'overlay';
  overlay.textContent = text;
  document.body.append(overlay);
  setTimeout(() => overlay.remove(), ms);
};

showOverlay('Wird geladen …');

// Wichtig · Fallstricke

Kein Rückgabewert: Wer das entfernte Element weiterverwenden will, muss vorher selbst eine Referenz darauf speichern. parent.removeChild(el) gibt das Element dagegen zurück.
Speicherlecks: Durch remove() wird das Element nicht freigegeben, solange Variablen, Closures, Map-Einträge oder Arrays noch darauf verweisen. Bei langlebigen Anwendungen sollte man solche Referenzen entfernen oder WeakMap/WeakRef verwenden.
Live-Collections: Beim Entfernen während einer Schleife über getElementsByClassName() oder element.children werden Einträge übersprungen, weil sich die HTMLCollection sofort verändert. Abhilfe: querySelectorAll() (statisch) nutzen, die Collection mit Array.from() kopieren oder rückwärts durchlaufen.
Null-Fallstrick: document.querySelector('.x').remove() wirft einen TypeError, wenn kein Element gefunden wird. Optional Chaining hilft: document.querySelector('.x')?.remove().
Verwechslungsgefahr: HTMLSelectElement.remove(index) überschreibt die Methode für <select>. Mit Argument entfernt sie eine <option>. Ohne Argument entfernt sie das <select> selbst. Auch DOMTokenList.remove() (classList) ist etwas völlig anderes.
Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome 23+, Firefox 23+, Safari 7+, Edge 12+), aber nicht vom Internet Explorer. Dort braucht man el.parentNode && el.parentNode.removeChild(el) oder ein Polyfill.
Entfernte <script>-Elemente machen bereits ausgeführten Code nicht rückgängig. Entfernte <iframe>-Elemente werden dagegen entladen.

Siehe auch

Node.removeChild() Element.replaceWith() Element.append() Element.before() Element.after() Element.replaceChildren() Node.isConnected Element.closest()