Looping though childNodes and deleting all leaves one entry not deleted

Question

I have a function that iterates all options returned from an API fetch, creates a p tag for each, and appends them all to a parent div called options

    textOptions.forEach((text) => {
        let newText = document.createElement('p')
        newText.innerHTML = text
        newText.addEventListener('click', () => {
            replaceSelectedText(newText.innerHTML, range)
            handleCloseMenu()
        })
        options.appendChild(newText)
    })

when the handleCloseMenu() function is executed, it is to check if the div options has any children and if so, remove them all, so that the next API call cacn return a fresh set of children.

const handleCloseMenu = () => {
    menu.style.display = 'none'
    if (options.hasChildNodes()) {
        options.childNodes.forEach((child) => {
            child.remove()
        })
    }
    console.log('OPTIONS CHILDREN', options.childNodes)
}

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

_“The read-only [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) property of the `Node` interface returns a **live** `NodeList` of child nodes of the given element […]. **Note**: The `NodeList` being live means that its content is changed each time new children are added or removed.”_ — Sebastian Simon, Mar 12 '22 at 03:48

score 1 · Answer 1 · answered Mar 12 '22 at 03:50

childNodes is a live collection:

options.childNodes.forEach((child) => {
  console.log('x');
  child.remove()
})

<div id="options"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

If you remove an element contained in the collection, the collection will change instantly - while you're iterating over it, so indicies will be lost if you iterate 0-1-2-3 etc like normal.

Turn it into an array instead, to extract all values into a static collection first.

[...options.childNodes].forEach(

Looping though childNodes and deleting all leaves one entry not deleted

1 Answers1