The Old NetISSUE #37 of 60

removing nodes · removeChild

Pixel PeteVSQuirks Mode

Pixel Pete saysRemove nodes with the modern node.remove() or the older parent.removeChild(node).

node.remove() deletes an element directly — no parent reference needed. The legacy form is parent.removeChild(node), which also returns the removed node. To clear a container, set parent.replaceChildren() (or, carefully, innerHTML = ""). Removing a node also detaches its event listeners with it.

Power-ups you unlock

node.remove() — modern, direct
parent.removeChild(node) — legacy, returns it
replaceChildren() clears a container
Removing a node drops its listeners

Quirks Mode attacks — common mistakes

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

Boss battleRemove one element with remove() and clear a list with replaceChildren().

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>keep</li></ul>
<script>document.getElementById('a').remove();</script></body></html>

▶ Open the interactive comic issue

‹ Inserting Nodes · AppendChild · InsertBefore Cloning Nodes · CloneNode Deep Vs Shallow ›