Remove Child Nodes In JavaScript

After discovering whether an element has children, one may want to go ahead and remove them. The brutalist approach involves setting the node’s innerHTML property to an empty string.

<div id="box">
  <h1>Hello</h1>
</div>

var box = document.getElementById('box');
if (box.firstChild) {
  box.innerHTML = '';
}

Another option is to grab the firstChild and then remove it like so:

while (box.firstChild) {
  box.removeChild(box.firstChild);
}

The results on jsperf indicate that removeChild is the faster of the two techniques, and also the more robust: the innerHTML technique won’t work on XML markup.

But wait! As usual, there is another alternative. Check out:

while (box.hasChildNodes()) {
	box.removeChild(box.lastChild);
}

It’s really just a variant on the method above: ensuring that box still has children and removing them from the bottom instead of the top.