How to remove all the child nodes of an element

Question

I am just getting started off with javascript and I am trying to build a To-Do app. My problem is that I have a clear all button which when clicked removes all the tasks from the list. And to make it work, I have written this function(see below).

function clearAll(e){
e.preventDefault()

let allItems = todoList.childNodes
allItems.forEach(function(item){
   todoList.removeChild(item)
})
      
  }

Here the

todoList

is a ul element to which the divs(tasks) are appended dynamically. The result is that I am getting alternate items removed when I click the button. How do I fix this?

score 4 · Accepted Answer · answered Oct 16 '21 at 13:50

4

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

todoList.innerHTML = ""

answered Oct 16 '21 at 13:50

Aviral

218
2
12

1

Interesting performance analysis comparing `removeChild` to `innerHTML`: https://rusingh.com/javascript-benchmark-removechild-vs-innerhtml/ I was surprised to see that `innerHTML` is significantly slower (65% slower in this test) – David784 Oct 16 '21 at 13:58
According to [this site](https://www.javascripttutorial.net/dom/manipulating/remove-all-child-nodes/) it is possible that this method may not remove event handlers, which could result in memory leaks. – Flightkick Aug 10 '22 at 20:44

score 3 · Answer 2 · answered Oct 16 '21 at 13:53

The following removeAllChildNodes() function removes all the child nodes of a node:

function removeAllChildNodes(parent) {
    while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
    }
}
const container = document.querySelector('#container');
removeAllChildNodes(container)

How to remove all the child nodes of an element

2 Answers2