如何删除网格内的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”类的所有元素，然后为每个元素找到其父节点，请使用querySelectorAll()删除该元素，例如：

removeChild()

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);