如何刪除網格內的 div？

Question

如何刪除網格中名稱為“grid-item”的 class 的 div？ 如何遍歷它們並刪除它們？ 我想使用 reset() function 來刪除 class 名稱為“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()查找具有 class “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>