Как удалить div внутри сетки?

Question

Как я могу удалить div с именем класса "grid-item" в сетке? Как их перебрать и удалить? Я хочу использовать функцию 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>