Почему моя функция продолжает добавлять узлы DOM?

Question

Я разрабатываю сетку, которая принимает входные данные от пользователя для изменения количества внутренних элементов

<section id="content">
        <div id="mother"></div>
</section>

Javascript:

 const mother = document.querySelector("#mother");
 let squareside = 16;

function createGrid(squareSide){
            mother.style.gridTemplateColumns = `repeat(${squareSide}, 1fr)`;
            mother.style.gridTemplateRows = `repeat(${squareSide}, 1fr)`;
            let squared = squareSide**2
            for (i = 0; i < squared; i++){
                const box = document.createElement("div");
                box.classList.add("default");
                box.addEventListener("mouseenter", changeColor);
                box.style.backgroundColor = "whitesmoke";
                mother.appendChild(box);
            }
        }


function resizer(){ //here is the problem:
            squareSide = prompt("How many squares per side on your grid?", "16");
            createGrid(squareSide);
            reseter();
        }

при запуске средства изменения размера функционируют узлы DOM ADDS в исходную сетку. у оригинала 256 элементов, если я вызываю resizer со значением 10, он добавляет еще 100 элементов вместо создания новой сетки всего из 100 узлов.

Это часть учебной программы проекта Odin

Answer 1

После предложений я добавил пару строк, чтобы удалить предыдущие элементы в al oop:

function resizer(){
            squareSide = prompt("How many squares per side on your grid?", "16");
            while(mother.hasChildNodes()){ //loops thru the parent div
                mother.removeChild(mother.firstChild); //removes the first child
            }
            createGrid(squareSide);
            reseter(); // just changes the coloring inside the grid
        }