Javascript replaceChild, removeChild – Ersetzen und löschen

replaceChild()

Gleich vorweg: replaceChild und removeChild sind zuverlässige, allerdings auch uralte Methoden. Wenn ausgediente Browser wie IE11 nicht unterstützt werden müssen, sind die modernen Methoden replaceWith und remove unkomplizierter.

Javascript node.replaceChild (newChild, oldChild) ersetzt unterhalb des Knotens node den Knoten oldChild durch den Knoten newChild. Der ersetzte Knoten wird automatisch gelöscht.

Dabei können sowohl der ersetzte Knoten als auch der neue Knoten komplette Blöcke mitsamt beliebig vielen Kindknoten sein. Der neue Knoten kann mit cloneNode aus dem Dokument kopiert werden (z.B. komfortabel mit einem HTML-Template-Element) oder kann ein neu erzeugter Knoten sein.

<ul id="aList">
   <li>Montag</li>
   <li>Dienstag</li>
   <li>Mittwoch</li>
</ul>

Um den Knoten mit der id aList durch den neu erzeugten Knoten newNode zu ersetzen, muss newNode unterhalb des parentNode des alten Knotens eingehangen werden: oldNode.parentNode.replaceChild(newNode, oldNode);.

const old = document.querySelector('#aList');
const new = document.createElement('p');
const newText = document.createTextNode('An drei Tagen in der Woche');
new.appendChild(newText);
old.parentNode.replaceChild(new, old);
new.setAttribute('id','aList');

Wenn das Skript nach dem Ersetzen des alten Knotens erneut angestoßen wird, würde es einen Fehler erzeugen, weil das Element mit id="aList" nicht mehr existiert. Darum bekommt das neu erzeugte Element die ID aList.

replaceChild mit dem Umweg über den Parent-Node ist eine alte Methode. Wer auf IE11 verzichten kann, hat mit replaceWith eine moderne Methode, die Elemente ohne jeden Umweg direkt ersetzt.

const oldNode = document.querySelector ("ul");
let newElement = document.createElement ("input");
newElement.value = "Schreib mal wieder was!";

oldNode.replaceWith (newElement);

removeChild()

Bilder löschen

Javascript node.removeChild(oldChild) entfernt den Knoten oldChild unterhalb des Knotens node.

Dabei kann der Knoten oldChild ein vollständiges Fragment mit eigenen Kindknoten sein – removeChild entfernt den kompletten Block mit sämtlichen Unterknoten.

<div id="birds" >
  <img src="bird6.png" alt="" width="190" height="121" />
  <img src="bird5.png" alt="" width="190" height="121" />
  <img src="bird4.png" alt="" width="190" height="121" />
</div>
<button id="removeBirds">Bilder löschen</button>

document.getElementById('removeBirds').onclick = function () {
    if (document.getElementById('birds')) {
        var birds = document.getElementById('birds');
        birds.parentNode.removeChild(birds);
    }
}

Das Element wird anhand seines id-Attributs birds identifiziert und schnell und schmerzlos mitsamt seinem Kindknoten aus seinem Elternknoten entfernt.

Mit dieser Syntax wird das Element aus dem DOM entfernt, aber nicht gelöscht, sondern schwebt als ungebundenes Element abseits vom DOM.

Äquivalent zu replaceWith gibt es eine moderne Javascript-Methode remove (), die ein Elemente direkt ohne den Weg über den Parent-Node aus dem DOM abhängt.

const oldNode = document.querySelector("ul");

oldNode.remove();

oldNode = elem.removeChild(node)

Wenn das Element aus dem DOM entfernt, aber später weiter zur Verfügung stehen soll, wird es beim Entfernen einer Referenz zugewiesen.

Anstelle von birds.parentNode.removeChild(birds):

oldNode = birds.parentNode.removeChild(birds);

dann kann das gelöschte Element später erneut in das DOM eingefügt werden.

document.querySelector("#newpos").appendChild(oldNode);

remove und replaceWith

Die einfachste Art, ein Element zu löschen, ist elem.remove ();

document.querySelector("#blue").addEventListener ("click", function () {
	this.remove ();
});

Das einfache remove () braucht nur eine Referenz auf das Element, während removeChild eine Referenz sowohl auf das Element als auch auf das Parent-Element braucht. Das Ergebnis der Methode ist in beiden Fällen dasselbe.

removeChild und replaceChild sind alte und zuverlässige Methoden, aber before und after und remove und replaceWith werden von IE11 noch nicht unterstützt.