JavaScript Academy · Lektion

Knoten entfernen und ersetzen

Entfernen und ersetzen Sie Elemente sicher.

Knoten entfernen und ersetzen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Knoten entfernen

Neben dem Hinzufügen von Elementen müssen Sie diese häufig auch entfernen oder ersetzen. Moderne DOM-Methoden machen das kurz und übersichtlich.

remove

remove trennt ein Element direkt vom DOM. Eine Referenz auf das übergeordnete Element ist dafür nicht erforderlich.

const alert = document.querySelector(".alert");
alert.remove();

removeChild

Die ältere Methode removeChild wird auf dem übergeordneten Element aufgerufen und gibt den entfernten Knoten zurück, sodass Sie ihn wiederverwenden können.

const list = document.querySelector("ul");
const removed = list.removeChild(list.firstElementChild);

Mehrere Knoten entfernen

Um alle untergeordneten Elemente zu entfernen, führen Sie eine Schleife aus, bis keines mehr vorhanden ist, oder setzen Sie innerHTML auf eine leere Zeichenkette. Das ist schnell, verwirft jedoch Referenzen.

while (list.firstChild) {
  list.removeChild(list.firstChild);
}

replaceWith

replaceWith ersetzt ein Element in einem einzigen Aufruf durch einen oder mehrere neue Knoten oder Zeichenketten.

const old = document.querySelector(".placeholder");
const fresh = document.createElement("div");
old.replaceWith(fresh);

replaceWith mit mehreren Knoten

replaceWith akzeptiert mehrere Argumente, sodass Sie einen Knoten durch viele ersetzen können.

old.replaceWith(headerEl, bodyEl);

replaceChild

replaceChild(newNode, oldNode) wird als klassische Methode auf dem übergeordneten Element aufgerufen. Achten Sie auf die Reihenfolge der Argumente: zuerst das neue, dann das alte Element.

list.replaceChild(newItem, oldItem);

Getrennte Knoten bleiben erhalten

Ein entfernter Knoten wird nicht zerstört. Wenn Sie eine Referenz behalten, können Sie ihn später wieder einfügen. Das ist beispielsweise für Muster zum Ein- und Ausblenden nützlich.

const saved = panel;
panel.remove();
// later:
container.append(saved);

replaceChildren

replaceChildren ersetzt alle untergeordneten Elemente eines Elements auf einmal oder entfernt sie, wenn die Methode ohne Argumente aufgerufen wird.

list.replaceChildren(itemA, itemB); // set new contents
list.replaceChildren();             // remove everything

Speicher und Listener

Beim Entfernen eines Elements werden auch seine Event-Listener daran gehindert, während der Trennung ausgelöst zu werden. Wenn Sie das Element wieder hinzufügen, bleiben die direkt daran registrierten Listener erhalten.

btn.addEventListener("click", handler);
btn.remove();          // handler will not fire while detached
container.append(btn); // handler works again

Die passende Methode auswählen

Bevorzugen Sie remove und replaceWith für sauberen modernen Code. Verwenden Sie removeChild/replaceChild, wenn Sie den zurückgegebenen Knoten benötigen oder sehr alte Umgebungen unterstützen müssen.

Schnelltest

Prüfen Sie die Reihenfolge der Argumente.

Zusammenfassung

Entfernen Sie Knoten mit der modernen Methode remove oder mit der übergeordneten Methode removeChild. Ersetzen Sie sie mit replaceWith (modern, mehrere Argumente) oder replaceChild(newNode, oldNode). Verwenden Sie replaceChildren, um alle untergeordneten Elemente zurückzusetzen. Getrennte Knoten bleiben im Speicher erhalten und können später wieder eingefügt werden.

Häufig gestellte Fragen

Ist die Lektion „Knoten entfernen und ersetzen“ kostenlos?

Ja — der vollständige Text von „Knoten entfernen und ersetzen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Knoten entfernen und ersetzen“?

Entfernen und ersetzen Sie Elemente sicher. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Knoten entfernen und ersetzen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy