javascript - 如何删除网格内的div？

Question

如何删除网格中类名为“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);

Answer 1

您可以使用querySelectorAll()查找类为“grid-item”的所有元素，然后为每个元素查找其父节点，使用 removeChild()删除元素，例如:

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

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 (let 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() {
  document
    .querySelectorAll(".grid-item")
    .forEach((e) => e.parentNode.removeChild(e));
}

makeRows(canvasSize);

.grid-item {
  border: 1px solid black;
  width: 10px;
  padding: 10px;
  margin: 5px
}

<div id="container"></div>