How Can I Remove All Child Elements from a DOM Node in JavaScript?

Removing Child Elements of a DOM Node in JavaScript

To remove all child elements from a DOM node in JavaScript, you can utilize several approaches.

Option 1: InnerHTML
This method replaces the entire inner content of a node. It's straightforward but may have performance implications due to browser HTML parsing.

Example:

const myNode = document.getElementById("foo");
myNode.innerHTML = '';

Option 2: Child Nodes Collection
Access the child nodes collection of the node and set it to an empty array:

myNode.childNodes.length = 0;

Option 3: Remove Child (jQuery)
For jQuery users, the following snippet effectively removes child elements:

$('#foo').empty();

The above is the detailed content of How Can I Remove All Child Elements from a DOM Node in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!