-1

When I run the following code, half of the items are removed from the list.. I am trying to remove all items from the list.

  //Sets an event listener to the reset button.
  resetButton.addEventListener('click', (e) => {
      const ul = document.getElementById("myUL");
      console.log(ul.children.length);

      //Moves through the unordered list and removes each list item.
      for(let i = 0; i < ul.children.length; i++) {
        ul.removeChild(ul.children[i]);
      }
  });
Collin DeSoto
  • 5
  • 5
  • 1
    Possible duplicate of [Javascript not removing all elements within a div](https://stackoverflow.com/questions/18410450/javascript-not-removing-all-elements-within-a-div) – Sebastian Simon Jun 03 '17 at 22:50
  • 1
    You are modifying the list over which you are iterating - that leads to the observed issues. See https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript for a solution. – le_m Jun 03 '17 at 22:50
  • Have you tried `for(let i = ul.children.length ; i>= 0;i++)`? – Vivick Jun 03 '17 at 22:51
  • Possible duplicate of [Remove all child elements of a DOM node in JavaScript](https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript) – The SE I loved is dead Jun 04 '17 at 01:43

3 Answers3

2

The reason your code seemingly seems random is due to:

for(let i = 0; i < ul.children.length; i++) {
    ul.removeChild(ul.children[i]);
}

As you are removing elements from the UL, it's children length is getting smaller so ul.children.length is reducing from n, to n-1, to n-2 etc. However, your i is increasing. Eventually, i will be larger than ul.children.length even thought there children left over. As i increases, your children in UL is getting smaller, however you are removing from the 0 first. So it means you will also eventually be attempting to remove elements which doesn't exist, as they are now in [0].

I modified your code to this following:

document.getElementById('reset').addEventListener('click', (e) => {
  const ul = document.getElementById("myUL");

  while (ul.children[0]) {
    ul.removeChild(ul.children[0])
  }
});
user2340824
  • 2,142
  • 2
  • 15
  • 19
2

You are iterating over a list and inside the iteration you are manipulating the list removing elements. This is causing the issue.

For removing all the elements inside your node you can simply do:

document.getElementById("myUL").innerHTML = '';

Otherwise if you like loops for some reason, do that: 

var el = document.getElementById("myUL");
while (el.firstChild) {
   el.removeChild(el.firstChild);
}
quirimmo
  • 9,800
  • 3
  • 30
  • 45
1

You could do so, the code would be even more compact

jquery solution

  //Sets an event listener to the reset button.
  resetButton.addEventListener('click', (e) => {
      const ul = document.getElementById("myUL");

      $(ul).empty();

  });

This function removes all the children of the father object

 .empty();

html standard solution

  //Sets an event listener to the reset button.
  resetButton.addEventListener('click', (e) => {
      const ul = document.getElementById("myUL");

      ul.innerHTML ="";

  });

This variable represents the html content of the parent object

.innerHTML =""
Gianfrancesco Aurecchia
  • 750
  • 5
  • 23