The DOM ForestISSUE #6 of 21

removing elements · remove · removeChild

NodetteVSThe Event Bubbler

Nodette saysRemove elements with element.remove(); replace with replaceWith or replaceChild.

el.remove() deletes an element from the DOM directly (no parent reference needed). el.replaceWith(newEl) swaps it. For empty-and-refill, set parent.replaceChildren(...) or, sparingly, innerHTML = "". Removing an element also removes its listeners (no leak from the node itself).

Power-ups you unlock

el.remove() deletes the element
el.replaceWith(node) swaps it
replaceChildren(...) refills a parent
Removing a node drops its listeners

The Event Bubbler attacks — common mistakes

Old removeChild ceremony when remove() suffices
innerHTML="" wiping listeners you needed
Removing while iterating a live collection

Boss battleRemove a clicked item and replace another with a new element.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><ul><li id="a">remove me</li><li id="b">keep</li></ul>
<script>document.getElementById('a').remove();</script></body></html>

▶ Open the interactive comic issue

‹ Creating Elements · CreateElement · AppendChild Attributes · GetAttribute · SetAttribute · Dataset ›