似乎无法找到一种方法将我的 div 清除回默认值（Etch a Sketch 项目）

Question

我不知道我做的项目是否“错误”，但到目前为止这一直有效。我基本上只是在创建一个 JavaScript 版本的 Etch a Sketch，将鼠标悬停在 div 上，它会改变颜色。我需要创建一个按钮，将主 div 重置为默认值，有效地“清除”页面，但我尝试的任何操作似乎都不起作用。有什么建议吗？

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 class="button">
    <button class="clearBtn" onclick="clearDiv()">CLEAR</button>
</div>

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

Answer 1

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 class="button">
  <button class="clearBtn" onclick="clearDiv()">CLEAR</button>
</div>

<div id="main">

</div>

似乎无法找到一种方法将我的 div 清除回默认值（Etch a Sketch 项目）

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

html

javascript

button