Looping though childNodes and deleting all leaves one entry not deleted [duplicate]

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