Estaba tratando de construir una pequeña cuadrícula para un proyecto Etch A Sketch, cuando inserto el primer tamaño de cuadrícula (con un botón que usa un addEventListener) todo va bien, pero cuando inserto nuevamente otro tamaño de cuadrícula, los divs reales se apilan debajo de los divs anteriores : https://i.stack.imgur.com/sS5Wm.jpg
He intentado literalmente todo, pero no puedo cambiar los siguientes divs con el número anterior de divs insertados.
const boxWrapper = document.querySelector('.box-wrapper'); const boxBtn = document.querySelector('#box-btn'); boxBtn.addEventListener("click", addDivs); function addDivs() { let size = window.prompt("Insert grid size: "); for (let i = 0; i < size; i++) { for (let j = 0; j < size; j++) { const div = document.createElement("div"); div.classList.add("boxes"); div.style.width = 100 / size + "%"; div.style.height = 100 / size + "%"; boxWrapper.appendChild(div); } } } *{ box-sizing: border-box; } body { display: grid; place-items: center; margin: 0; padding: 0; width: 100%; height: 100vh; } h1{ margin: -20px 0 0 0; } .dark{ background-color: #000000; } .boxes{ background-color: #eeeeee; border: 0.5px dotted #7d7d7d; display: grid; place-items: center; } .boxes:hover{ background-color: #fff; } .box-wrapper{ margin: 0; padding: 0; margin-top: -115px; display: flex; flex-flow: row wrap; width: 510px; height: 510px; background-color: #ffffff; border: 5px solid #7d7d7d; } #box-btn{ margin-top: -155px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Etch A Sketch</title> </head> <body> <h1>ETCH A SKETCH</h1> <button id = "box-btn">Create a grid</button> <div class="box-wrapper"> </div> </body> </html>Una solución rápida es agregar boxWrapper.innerHTML = ""; al comienzo de su función addDivs . Borrará todo el contenido de su boxWrapper cada vez que se llame a la función.
También para fines de prueba, me deshice de parte de su CSS porque su encabezado no se podía ver.
Una mejor solución sería usar esto en su lugar, por lo que también elimina a los oyentes de eventos.
while (boxWrapper.firstChild) { boxWrapper.removeChild(boxWrapper.firstChild); } const boxWrapper = document.querySelector('.box-wrapper'); const boxBtn = document.querySelector('#box-btn'); boxBtn.addEventListener("click", addDivs); function addDivs() { while (boxWrapper.firstChild) { boxWrapper.removeChild(boxWrapper.firstChild); } let size = window.prompt("Insert grid size: "); for (let i = 0; i < size; i++) { for (let j = 0; j < size; j++) { const div = document.createElement("div"); div.classList.add("boxes"); div.style.width = 100 / size + "%"; div.style.height = 100 / size + "%"; boxWrapper.appendChild(div); } } } *{ box-sizing: border-box; } body { display: grid; place-items: center; margin: 0; padding: 0; width: 100%; height: 100vh; } h1{ margin: -20px 0 0 0; } .dark{ background-color: #000000; } .boxes{ background-color: #eeeeee; border: 0.5px dotted #7d7d7d; display: grid; place-items: center; } .boxes:hover{ background-color: #fff; } .box-wrapper{ margin: 0; padding: 0; display: flex; flex-flow: row wrap; width: 510px; height: 510px; background-color: #ffffff; border: 5px solid #7d7d7d; } <h1>ETCH A SKETCH</h1> <button id = "box-btn">Create a grid</button> <div class="box-wrapper"> </div>