Estoy haciendo un proyecto de etch-a-sketch y hasta ahora ha ido bien. Quería desafiarme a mí mismo haciendo un botón para "destruir" la nueva cuadrícula que creo con otro botón.

El problema es que el botón solo funciona una vez y luego arroja el error: Node.removeChild: el nodo que se eliminará no es un elemento secundario de este nodo**

Resolví esto después de prueba y error, moviendo mi variable const fuera del alcance global y dentro de la función destroyBtn . El problema es que no sé por qué funciona. Si está en el ámbito global, ¿no debería ser siempre accesible querySelectorAll('.grid') / apuntar a una cuadrícula recién creada? Gracias por tu tiempo.

Esto funciona:

 const containerBtn = document.querySelector('.container') const destroyBtn = document.querySelector('#destroybtn') destroyBtn.addEventListener('click', () => { const targetSquares = document.querySelectorAll('.grid') // moved inside function for (let i = 0; i < targetSquares.length; i++) { containerBtn.removeChild(targetSquares[i]) } })

Esto no lo hace:

 const containerBtn = document.querySelector('.container') const destroyBtn = document.querySelector('#destroybtn') const targetSquares = document.querySelectorAll('.grid') // in global scope destroyBtn.addEventListener('click', () => { for (let i = 0; i < targetSquares.length; i++) { containerBtn.removeChild(targetSquares[i]) } })