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
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(