Remove All Child Elements of a Dom Node in JavaScript

Remove all child elements of a DOM node in JavaScript

Option 1 A: Clearing innerHTML.

• This approach is simple, but might not be suitable for high-performance applications because it invokes the browser's HTML parser (though browsers may optimize for the case where the value is an empty string).

doFoo.onclick = () => {

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

  myNode.innerHTML = '';

}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">

  <span>Hello</span>

</div>

<button id='doFoo'>Remove via innerHTML</button>

How to remove all the child nodes of an element

You don't need all these complex things when you can just remove the innerHTML!

todoList.innerHTML = ""

How to delete all Child Elements from a div element using JS

If you need to clear ALL elements, then there is no need to iterate through them.

You can just clear the innerHTML of the div like so:

document.getElementById('yourdivid').innerHTML = '';

And then you can proceed with the rest of your code that creates the new elements

Remove all childNodes in 0(1) on DOM element

I really doubt children can be removed in O(1), even with node.innerHTML = '' as the underlying implementation may very well be a O(N) operation.

What you should consider to improve performance is to minimize the number of DOM reflows.

1. You could try replacing the element with a clone.

const list = document.querySelector('ul');

const listClone = list.cloneNode(false);

list.parentNode.replaceChild(listClone, list);

<ul>

  <li>First</li>

  <li>Last</li>

</ul>

Remove all child elements of a DOM node in JavaScript

Option 1 A: Clearing innerHTML.

• This approach is simple, but might not be suitable for high-performance applications because it invokes the browser's HTML parser (though browsers may optimize for the case where the value is an empty string).

doFoo.onclick = () => {

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

  myNode.innerHTML = '';

}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">

  <span>Hello</span>

</div>

<button id='doFoo'>Remove via innerHTML</button>

Remove multiple specific childNodes in JavaScript

You can use Element.remove() in a loop

const uls = document.querySelectorAll('#custom_description_video > ul')

uls.forEach(el => el.remove())

<div id="custom_description_video">
  <div>Some div</div>
  <div>Another div</div>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>

</div>

Remove all child nodes

dojo.empty(node) will remove all children from the node, while keeping the node.

dojo.destroy(node) will remove all children from the node, and then removes the node from its parent as well.

Remove all child nodes but the first one

Don't use for-loop to remove DOM elements like this. The problem is that rows is a live collection, meaning that it updates every time you remove elements from DOM. As the result, i counter shifts and eventually you hit "undefined" element spot.

Instead, use while loop. For example, to remove all rows except the first one you could do:

var rows = table.getElementsByTagName("tr");
while (rows.length > 1) {
    rows[1].parentNode.removeChild(rows[1]);
}

Also note, that it's getElementsByTagName without s.

UPD. Or iterate backward if you like for-loops better:

var rows = table.getElementsByTagName("tr");
for (var i = rows.length - 1; i > 0; i--) {
    rows[i].parentNode.removeChild(rows[i]);    
}

Demo: https://jsfiddle.net/9y03co6w/

---

Related Topics