title: removing childNodes using node.childNodes.forEach
body: <p>Traditionally, a suggested way of removing a node's children in Javascript is to do something like this:</p>
  
  <pre><code>while(node.firstChild) {
      node.removeChild(node.firstChild);
  }
  </code></pre>
  
  <p>Recently, I attempted to remove all of a node's children using the built in forEach() method:</p>
  
  <pre><code>node.childNodes.forEach(child =&gt; {
      node.removeChild(child);
  }
  </code></pre>
  
  <p>This didn't function as I expected. Instead of removing all child nodes, the forEach stopped executing, leaving nodes leftover. What I ended up having to do was use Array.from:</p>
  
  <pre><code>Array.from(node.childNodes)
  </code></pre>
  
  <p>And then I could remove nodes with forEach. The reason I could not use the traditional method mentioned above is because for some reason, one child was always left behind, causing an infinite loop.</p>
  
  <p>Why does the childNodes.forEach method not remove all the nodes as I thought it would? What am I misunderstanding?</p>