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.