Can't seem to find a way to clear my divs back to default (Etch a Sketch project)-CodePudding

I don't know if I'm doing the project "wrong" but so far this has been working. I'm basically just creating a JavaScript version of Etch a Sketch, where you hover your mouse over a div and it changes color. I need to create a button that resets the main div back to default, effectively "clearing" the page but nothing I try seems to work. Any suggestions?

const mainDev = document.createElement("div");
mainDev.style.width = "200px";
mainDev.style.height = "200px";
mainDev.style.display = "grid";
mainDev.id = "divId";
mainDev.style.gridTemplateColumns = "repeat(16, 1fr)";
let addMain = document.getElementById("main");
addMain.appendChild(mainDev);
for (let i = 0; i < 240; i  ) {
    const sixteenDivs = document.createElement("div");
    sixteenDivs.classList.add("sixteen");
    sixteenDivs.style.backgroundColor = "white";
    sixteenDivs.style.width = "45px";
    sixteenDivs.style.height = "45px";
    sixteenDivs.style.border = "1px solid #000"
    sixteenDivs.style.display = "grid";
    sixteenDivs.style.margin = "5px 5px";
    let mouseOver = function() { sixteenDivs.style.backgroundColor = "rgb(20, 20, 20)" };
    sixteenDivs.onmouseover = mouseOver;
    mainDev.appendChild(sixteenDivs);
}

function clearDiv() {
    /// this is where I'm struggling
}

<div >
    <button  onclick="clearDiv()">CLEAR</button>
</div>

<div id="main"></div>

CodePudding user response：

const mainDev = document.createElement("div");
mainDev.style.width = "200px";
mainDev.style.height = "200px";
mainDev.style.display = "grid";
mainDev.id = "divId";
mainDev.style.gridTemplateColumns = "repeat(16, 1fr)";
let addMain = document.getElementById("main");
addMain.appendChild(mainDev);
for (let i = 0; i < 240; i  ) {
  const sixteenDivs = document.createElement("div");
  sixteenDivs.classList.add("sixteen");
  sixteenDivs.style.backgroundColor = "white";
  sixteenDivs.style.width = "45px";
  sixteenDivs.style.height = "45px";
  sixteenDivs.style.border = "1px solid #000"
  sixteenDivs.style.display = "grid";
  sixteenDivs.style.margin = "5px 5px";
  let mouseOver = function() {
    sixteenDivs.style.backgroundColor = "rgb(20, 20, 20)"
  };
  sixteenDivs.onmouseover = mouseOver;
  mainDev.appendChild(sixteenDivs);
}

function clearDiv() {
  mainDev.childNodes.forEach((child) =>
    child.style.backgroundColor = "white"
  )
}

<div >
  <button  onclick="clearDiv()">CLEAR</button>
</div>

<div id="main">

</div>