Elemente aus DOM entfernen

Genauso wie du Elemente erzeugen und einfügen kannst, kannst du sie wieder aus dem DOM entfernen – einzelne Elemente, Kinder eines Containers oder den gesamten Inhalt.

remove()

Mit remove() löschst du ein Element direkt aus dem DOM. Du brauchst kein Elternelement – du rufst die Methode am Element selbst auf.

remove()

1const hinweis = document.querySelector(".hinweis");
2
3hinweis.remove();

Output

Das Element mit der Klasse hinweis verschwindet von der Seite.

removeChild()

removeChild() ist die ältere Variante: Du rufst sie am Elternelement auf und übergibst das Kind, das entfernt werden soll.

removeChild()

1const liste = document.querySelector("ul");
2const erster = liste.firstElementChild;
3
4liste.removeChild(erster);

Output

Der erste Listenpunkt wird entfernt. Für neuen Code ist erster.remove() meist einfacher.

Inhalte leeren

Manchmal willst du ein Element behalten, aber alle Inhalte darin löschen – z. B. eine Box oder eine Liste leeren.

Inhalt leeren

1const box = document.querySelector("#box");
2
3// Variante 1: alle Kinder entfernen
4box.replaceChildren();
5
6// Variante 2: Inhalt als Text/HTML leeren
7box.textContent = "";
8// box.innerHTML = "";

Output

Die Box #box bleibt bestehen, ist aber innen leer. replaceChildren() ohne Argumente entfernt alle Kinder sauber.

Praktische Beispiele

Häufig entfernst du Elemente nach einer Nutzeraktion – zum Beispiel beim Klick auf „Löschen“.

Karte per Klick entfernen

1const button = document.querySelector("#loeschen");
2
3button.addEventListener("click", function() {
4    const karte = document.querySelector(".karte");
5    karte.remove();
6});

Output

Nach dem Klick auf den Button verschwindet die Karte mit der Klasse karte.

Alle Listenpunkte entfernen

1const liste = document.querySelector("ul");
2const eintraege = liste.querySelectorAll("li");
3
4eintraege.forEach(function(eintrag) {
5    eintrag.remove();
6});

Output

Alle li-Elemente der Liste werden nacheinander entfernt. Die leere ul bleibt bestehen.

Im nächsten Kapitel lernst du: Elemente im DOM ersetzen