Почему не удаляются события через removeEventListener?

Question

[Роман]

Всем привет. Учу js. Пишу игру крестики - нолики, играть будет компьютер и пользователь. После хода пользователя получаю все оставшиеся пустые клетки, чтобы сходил в первую попавшуюся компьютер. После хода пользователя событие на клетку, куда он сходил удаляется, а вот после компьютера нет. Что сделал не так?

const cells = document.querySelectorAll('.main .main_cell');

    cells.forEach(cell => {
        if (cell.dataset.number == 5) {
            let img = document.createElement('img');
            img.src = 'img/cross.png';
            cell.append(img);
        } else {
            cell.addEventListener('click', function go () {

                let img = document.createElement('img');
                img.src = 'img/zero.png';
                cell.append(img);

                let newCells = document.querySelectorAll('.main .main_cell');
                for (let i = 0; i < newCells.length; i++) {
                    if (newCells[i].innerHTML == '') {
                        let img2 = document.createElement('img');
                        img2.src = 'img/cross.png';
                        newCells[i].append(img2);
                        newCells[i].removeEventListener('click', go);
                        break;
                        
                    }
                }

                cell.removeEventListener('click', go);  
            });
        }
    });

<div class="main">
        <div data-number = '1' class="main_cell"></div> 
        <div data-number = '2' class="main_cell"></div>
        <div data-number = '3' class="main_cell"></div><br>
        <div data-number = '4' class="main_cell"></div>
        <div data-number = '5' class="main_cell"></div>
        <div data-number = '6' class="main_cell"></div><br>
        <div data-number = '7' class="main_cell"></div>
        <div data-number = '8' class="main_cell"></div>
        <div data-number = '9' class="main_cell"></div>
    </div>

.main_cell {
    border: 1px solid red; 
    width: 100px;
    height: 100px;
    display: inline-block;
    cursor: pointer;
}
.main_cell img {
    width: 100%;
    height: 100%;
    
}
.main_cell:hover {
    border: 3px solid red; 
}

Answer 1

[Stalker_RED]

Просто удалялка событий - довольно нежная штука, ей подавай точно такую-же функцию, которую навешивали. А у вас видимо что-то меняется. Можно конечно покопаться, и найти способ корректно удалять, но есть способ проще:

не удалять никакие обработчики и использовать всего один обработчик кликов.

Answer 2

[Пашенька]

Вы функцию go определили не в той области видимости.

Нужно было:

function go () {
  // ...
}

cell.addEventListener('click', go);

Тогда бы стало возможным:
cell.removeEventListener('click', go);