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()

HTML Div

1 <div class="loeschen">
2    <p>Das hier wird gelöscht</p>
3  </div>
4  <div>
5    <p>Dieser absatz bliebt</p>
6  </div>

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 loeschen = document.querySelector(".loeschen");
2
3loeschen.remove();

Output

Dieser absatz bliebt

removeChild()

HTML Liste

1<ul>
2<li>Item 1</li>
3<li>Item 2</li>
4<li>Item 3</li>
5</ul>

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

Item 2
Item 3

Inhalte leeren

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

Inhalt leeren

1<ul>
2<li>Item 1</li>
3<li>Item 2</li>
4<li>Item 3</li>
5</ul>

Inhalt leeren

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

Output

Nur die <ul> bleiben bestehen die Kinderelemente <li> werden entfernt.

Praktische Beispiele

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

CSS Code

1.karte {
2    width: 200px;
3    height: 200px;
4    color: white;
5    background-color: black;
6}
7
8.btn {
9    align-self: flex-start;
10    cursor: pointer;
11    font: inherit;
12    background-color: #fff;
13    color: #000;
14    border: none;
15    border-radius: 4px;
16    padding: 0.35rem 0.75rem;
17}

HTML Code

1 <div class="karte">
2        <h3>Eine Karte</h3>
3        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
4        <button id="loeschen" class="btn">Löschen</button>
5    </div>

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

Eine Karte

Lorem ipsum dolor sit amet consectetur adipisicing elit.

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