Tengo una función que itera todas las opciones devueltas de una búsqueda de API, crea una etiqueta p para cada una y las agrega todas a un div principal llamado opciones
textOptions.forEach((text) => { let newText = document.createElement('p') newText.innerHTML = text newText.addEventListener('click', () => { replaceSelectedText(newText.innerHTML, range) handleCloseMenu() }) options.appendChild(newText) }) cuando se ejecuta la función handleCloseMenu() , es para verificar si las opciones div tienen hijos y, de ser así, eliminarlos todos, de modo que la próxima llamada a la API pueda devolver un nuevo conjunto de hijos.
const handleCloseMenu = () => { menu.style.display = 'none' if (options.hasChildNodes()) { options.childNodes.forEach((child) => { child.remove() }) } console.log('OPTIONS CHILDREN', options.childNodes) }después de que se completa el ciclo en mi console.log, puedo ver que no ha eliminado a uno de los niños, siempre deja al segundo niño. También lo veo sentado allí en mis opciones durante la próxima llamada a la API. ¿Estoy haciendo algo mal? Sé que lo soy, por supuesto, pero agradecería mucho alguna información sobre cuál es el problema.
childNodes es una colección en vivo:
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>Si elimina un elemento contenido en la colección, la colección cambiará instantáneamente , mientras itera sobre él, por lo que los índices se perderán si itera 0-1-2-3, etc. como de costumbre.
Conviértalo en una matriz en su lugar, para extraer primero todos los valores en una colección estática.
[...options.childNodes].forEach(