JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <div class="carre"></div>
        </td>
        <td>
            <div class="carre"></div>
        </td>
        <td>
            <div class="carre"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="carre"></div>
        </td>
        <td>
            <div class="carre"></div>
        </td>
        <td>
            <div class="carre"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="carre"></div>
        </td>
        <td>
            <div class="carre"></div>
        </td>
        <td>
            <div class="carre"></div>
        </td>
    </tr>
</table>
<p id="out"></p>

CSS

table {
		    border-collapse: collapse;
		}
		table, table td {
		    border: 1px black solid;
		}
		.carre {
		    width: 50px;
		    height: 50px;
		    background: tomato;
		    margin: .5em;
		}

JavaScript

var cell;
var out = document.querySelector("#out");

// supprimer tous les événements (fonctionne pas)
function removeAllEvents() {
    for (var i = 1; i < 4; i++) {
        for (var j = 1; j < 4; j++) {
            cell = document.querySelector("table tr:nth-child(" + i + ") td:nth-child(" + j + ") .carre");
            cell.removeEventListener('click', test, false);
        }
    }
}

// affecte les événements
for (var i = 1; i < 4; i++) {
    for (var j = 1; j < 4; j++) {
        (function (i, j) {
            cell = document.querySelector("table tr:nth-child(" + i + ") td:nth-child(" + j + ") .carre");
            cell.addEventListener('click', function test() {
                out.innerHTML += i + ";" + j + "<br />";
                this.removeEventListener('click', test, false); // supprime l'événement courant : fonctionne
                // removeAllEvents(); Fonctionne pas
            }, false);
        })(i, j);
    }
}