Remove all child elements of a DOM node in JavaScript

Speed and Performance: The Fast and the Furious

Node types and removal methods

Before we dive in, let's learn some "node-lish" (node English). Note the differences between childNodes, firstChild, lastChild, firstElementChild, and lastElementChild. These properties target different node types:

• firstChild and lastChild deal with any node type (text, comment, element).
• firstElementChild and lastElementChild only reference actual elements.

Hyper-speed node removal

Performance matters. For large DOMs, it's faster to start removing child nodes from the end:

// "Run faster!" ––Last Child Node, probably
while (parentElement.lastChild) {
    parentElement.removeChild(parentElement.lastChild);
}


This way, it doesn't shift remaining child nodes in the live NodeList, making it quite a speedster.

Reusable methods: Write Once, Run Anywhere

Extend Element.prototype to create a reusable method for removal:

// Teach an element to clear its children and it stays tidy forever
Element.prototype.clearChildren = function() {
    while (this.firstChild) {
        this.removeChild(this.firstChild);
    }
};


This allows for machine-gun syntax cleaning:

// Taking 'parent' back to the good old childless days
document.getElementById('parent').clearChildren();


Event handlers and data bindings: Handle with Care

Event listeners and semantic memory cleanup

Setting .innerHTML = '' leaves event handlers and data bindings uncleaned, leading to memory leaks. Here's a better cleanup crew in town:

// A fresh start: all old events are in the past now
var newNode = parentElement.cloneNode(false);
parentElement.parentNode.replaceChild(newNode, parentElement);


With this method, your original element is left a clean slate without child nodes, and all event handlers are dismissed.

Replacin' with style: modern replaceChildren method

Introduced recently, replaceChildren lets you clear all child nodes or substitute them with newer ones:

// "Next!" ––Parent Node holding auditions
parentElement.replaceChildren();


Cross-browser and External Library: Play Nice Everyone

jQuery: "Oldie but a goodie"

Though not a sprinter like native JavaScript, jQuery is a good sport ensuring compatibility across platforms. You can use their method too:

// Poof! And they are gone
$('#parent').empty();


But be aware, jQuery can be like taking a jet to the grocery store – often too much for simple tasks with its added load time.

Internet Explorer: In memory of the fallen

Older Internet Explorer versions may not support some of these methods. Always verify compatibility:

// Note: IE might ghost you for using this
document.createRange().deleteContents(parentElement);


Going Deep: The Rabbit Hole

Check Before You Wreck

Before going on a removal spree, ensure children exist to avoid a mishap:

// "Are we there yet?" ––Deletion Function
if (parentElement.firstChild) {
    // Go nuts with deletion here
}


Performance Testing: The Speed Racer

Performance varies for different methods and use cases; always test the most efficient one for your scenario:

• JSPerf.

Documenting for Posterity

To dive deeper into innerHTML, consider Mozilla's guide:

• innerHTML Deep Dive.