Javascript remove, replaceWith – Elemente entfernen und ersetzen

remove – Elemente aus dem DOM entfernen

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

<div class="flex">
	<img src="flora.webp" width="480" height="647">
	<img src="humbolduni.webp" width="480" height="647">
	<img src="berlin.webp" width="480" height="647">
</div>

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

replaceWith () ersetzt ein Element mit einem oder mehreren Elementen ohne den Weg über das Parent-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ützte IE11 replaceNode. Dabei werden alle Eigenschaften des ersetzten Elements entfernt.

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.

replaceWith Multiple

replaceWith kann mehrere Elemente auf einen Streich ersetzen.

const input = document.createElement ("input");
input.value = "Schreib mal wieder was!"
const button = document.createElement ("button");
button.textContent = "Ab die Post"

document.querySelector(".old").replaceWith (input, button);

Jede Menge Scriptcode gegenüber dem antiken replaceChild gespart.