Javascript remove, replaceWith

remove, replace Element

replaceWith ersetzt ein Element durch andere Elemente, remove entfernt ein Element. Diese Methoden sind jünger als die altgedienten Methode replaceChild () und removeChild () und effizienter, denn sie erfordern nicht den Umweg über das Elternelement.

Diese Methoden sind das Pendant zu den gleichnamigen jQuery-Methoden.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

remove – Elemente aus dem DOM entfernen

remove () entfernt ein Element nicht wirklich, sondern hängt es nur aus der Baumstruktur des DOM ab. Der Verweis auf das Element existiert weiterhin und das Element könnte jederzeit neu eingehangen werden.

statue-flora-480 statue-humbolduni-480 statue-berlin-480
const paintings = document.querySelectorAll (".flex img");
const remove = document.querySelector (".remove");
remove.addEventListener ("click", function () {
	for (const item of paintings) {
		item.remove();
	}
});

Nicht IE11, aber enthalten im WebReflection/dom4-Polyfill.

replaceWith

replace With () ersetzt ein Element mit einem oder mehreren Elementen ohne den Weg über das Eltern-Element. Text (bleibt Text, kein innerHTML, das sich zu Elementen entwickelt).

const gallery = document.querySelectorAll(".gallery img");
const newElem = ["lemon.webp","pumpkin.webp","lime.webp"];

document.querySelector("#replace").addEventListener ("click", function () {
	for (let i=0; i<gallery.length; i++) {
		let img = document.createElement ("img");
		img.src = newElem[i];
		gallery[i].replaceWith(img);
	}
})

Statt ein neues Element mit createElement zu erzeugen, könnte auch ein DOMString eingesetzt werden. Aber wie schon erwähnt: Der DOMString bleibt Text.

Anstelle von replaceWith unterstützt IE11 replaceNode. Dabei werden alle Eigenschaften des ersetzten Elements entfernt.

Nur IE11
gallaxy[i].onclick = function () {
    let galaxy4 = document.getElementById("i4").cloneNode(true);
    this.replaceNode(galaxy4);
}

Den Ersatzknoten vor dem Aufruf von replaceNode() mit cloneNode kopieren, denn replaceNode verschiebt den Ersatz.