Para hacer lo que pides, debespuedes ponerlo en una función con nombre (y no anónima) para luego poder desvincular el evento correctamente usando dicho nombre de función.
Actualización: Hay una segunda solución más abajo sin removeEventListener y usando la opción once
como tercer parámetro del addEventListener
Por ejemplo (pulsa Ejecutar para verlo en acción):
Agrego enlace a la documentación de removeEventListener para más opciones.
Segunda solución (sin removeEventListener y con opción "once")
Mirando la documentación de addEventListener en inglés he encontrado esta otra sintaxis con las explicaciones de las opciones:
addEventListener(type, listener, options);
donde entre ellas se encuentra: once, que por defecto es false
.
Su descripción (traducida) dice:
Un valor booleano que indica que el agente de escucha debe invocarse
como máximo una vez después de agregarse. Si es true (verdadero), el detector
se eliminará automáticamente cuando se invoque. Si no se especifica,
el valor predeterminado es false (falso).
Por lo tanto, podriamos eliminar el addeventListener evitando el uso de removeEventListener de este modo:
let input = document.querySelector("input");
input.type = "button";
input.value = "aceptar";
input.addEventListener("click", function() {
console.log("Estoy a la escucha")
let parent = input.parentNode.parentNode;
let pHijos = parent.querySelectorAll("td");
pHijos.forEach((h, index) => {
if (index == 0) {
input.type = "checkbox";
input.value = "";
input.checked = false;
} else {
h.contentEditable = false; //anteriormente hice editables mis campos
h.classList.remove("editableOn");
h.textContent = "Ahora ya no tengo la clase editableOn";
}
});
console.log("Dejo de estar a la escucha gracias a la opción 'once'")
}, {once:true});
<table border=1>
<tr>
<td>
<input type="checkbox">
</td>
<td class="editableOn" contentEditable="true">Inicialmente tengo la clase editableOn</td>
<td class="editableOn" contentEditable="true">Inicialmente tengo la clase editableOn</td>
</table>