title: Looping though childNodes and deleting all leaves one entry not deleted
body: <p>I have a function that iterates all options returned from an API fetch, creates a <code>p</code> tag for each, and appends them all to a parent <code>div</code> called <strong>options</strong></p>
  <pre><code>    textOptions.forEach((text) =&gt; {
          let newText = document.createElement('p')
          newText.innerHTML = text
          newText.addEventListener('click', () =&gt; {
              replaceSelectedText(newText.innerHTML, range)
              handleCloseMenu()
          })
          options.appendChild(newText)
      })
  </code></pre>
  <p>when the <code>handleCloseMenu()</code> function is executed, it is to check if the <code>div</code> <strong>options</strong> has any children and if so, remove them all, so that the next API call cacn return a fresh set of children.</p>
  <pre><code>const handleCloseMenu = () =&gt; {
      menu.style.display = 'none'
      if (options.hasChildNodes()) {
          options.childNodes.forEach((child) =&gt; {
              child.remove()
          })
      }
      console.log('OPTIONS CHILDREN', options.childNodes)
  }
  </code></pre>
  <p>after the loop is done in my console.log I can see it has not deleted one of the children, it always leaves the second child. I also see it sitting there in my options during the next API call. Am I doing something incorrectly? I know I am of course but some info on what the problem is would be greatly appreciated</p>