Aktualisieren Sie foreach das Array in js

Ich habe diesen Code als mein XO-Spielprojekt geschrieben, aber das Problem ist, dass ich das Array, das foreach verwendet, nicht aktualisieren kann. Die Array-Änderungen habe ich mit console.log überprüft, aber ich kann es nicht für meine foreach-Funktion ändern, was sollte ich mache?

const boxes = document.querySelectorAll(".box");
const boxes_list = [...boxes];
boxes_list.forEach((box) => {
 box.addEventListener("mouseover", () => {
 box.innerHTML = "X";
 });
 box.addEventListener("mouseout", () => {
 box.innerHTML = "";
 });
 box.addEventListener("click", () => {
 const boxIndex = boxes_list.indexOf(box);
 if (boxIndex > -1) boxes_list.splice(boxIndex, 1);
 console.log(boxes_list);
 box.innerHTML = "X"; 
 });
});

.container {
 width: 175px;
 height: 175px;
}
.box {
 height: 50px;
 width: 50px;
 margin: 2px;
 display: inline-block;
 background-color: pink;
 vertical-align: top;
}

<div class='container'>
 <div class='box'></div>
 <div class='box'></div>
 <div class='box'></div>
 <div class='box'></div>
 <div class='box'></div>
 <div class='box'></div>
 <div class='box'></div>
 <div class='box'></div>
 <div class='box'></div>
</div>

Lösung des Problems

Du könntest die Box einfach entfernen. Aber das wird die verbleibenden Boxen verschieben, um den Platz einzunehmen. Wenn das in Ordnung ist, kann Ihr Klick-Listener einfach sein:

 box.addEventListener("click", () => {
 box.remove();
 });

Aber wenn Sie möchten, dass die verbleibenden Kästchen an Ort und Stelle bleiben, dann würde ich vorschlagen, das Element nicht zu löschen, sondern es auszublenden, indem Sie das Sichtbarkeits-CSS-Attribut auf versteckt setzen. Hier mache ich das, indem ich der Box eine andere Klasse "unsichtbar" zuweise.

const boxes = document.querySelectorAll(".box");
const boxes_list = [...boxes];
boxes_list.forEach((box) => {
 box.addEventListener("mouseover", () => {
 box.innerHTML = "X";
 });
 box.addEventListener("mouseout", () => {
 box.innerHTML = "";
 });
 box.addEventListener("click", () => {
 box.classList.add("invisible");
 });
});

.container {
 width: 175px;
 height: 175px;
}
.box {
 height: 50px;
 width: 50px;
 margin: 2px;
 display: inline-block;
 background-color: pink;
 vertical-align: top;
}
.invisible {
 visibility: hidden;
}

<div class='container'>
 <div class='box'></div>
 <div class='box'></div>
 <div class='box'></div>
 <div class='box'></div>
 <div class='box'></div>
 <div class='box'></div>
 <div class='box'></div>
 <div class='box'></div>
 <div class='box'></div>
</div>