Javascript 如何删除网格中的div？

如何在网格中删除类名为grid item的div？如何迭代并删除它们？我想使用reset函数删除每个类名为grid item的元素

const container = document.getElementById("container");

let canvasSize = Number(prompt("Enter amount of squares per side to make the new grid"));

let resetButton = document.createElement("button");
resetButton.innerHTML = "Reset Grid";
document.body.appendChild(resetButton);

function makeRows(_canvasSize) {
  const rows = canvasSize
  const cols = canvasSize
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");
    container.appendChild(cell).className = "grid-item";
    cell.addEventListener('mouseover', 
        e => e.target.style.backgroundColor = "black"
    )
  };
};

resetButton.addEventListener('click', (e) => {
    reset();
});

var list= document.getElementsByClassName("events");

function reset() {
    container.classList.remove("grid-item");
    makeRows(canvasSize)
}

makeRows(canvasSize);

您可以使用查找带有类网格项的所有元素，然后为每个元素查找其父节点，用于删除元素，如：

function reset() {
  document
    .querySelectorAll(".grid-item")
    .forEach((e) => e.parentNode.removeChild(e));
}

const container=document.getElementByIdcontainer； 让画布大小=数量 提示输入每边的方块数以生成新网格 ; 让resetButton=document.createElementbutton； resetButton.innerHTML=重置网格； document.body.appendChildReset按钮； 函数makeRows\u canvasSize{ const rows=画布大小； const cols=画布大小； container.style.setProperty-grid-rows，rows； container.style.setProperty-grid-cols，cols； 对于允许C＝0；C<行*CLSs；C++ { 让cell=document.createElementdiv； container.appendChildcell.className=网格项； cell.addEventListener 鼠标盖， e=>e.target.style.backgroundColor=黑色 ; } } resetButton.addEventListenerclick，e=>{ 复位； }; var list=document.getelementsbyclassnamevents； 功能复位{ 文件 .queryselectoral.grid-item .forEache=>e.parentNode.removeChilde； } makerowscanvas大小； .表格项目{ 边框：1px纯黑； 宽度：10px； 填充：10px； 保证金：5px }