Skip to main content
3 de 5
Agregada segunda solución
masterguru
  • 16k
  • 5
  • 15
  • 28

Para hacer lo que pides, puedes 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):

let input = document.querySelector("input");
input.type = "button"; 
input.value = "aceptar";

function funcionAceptar() {
  console.log("Estoy a la escucha")
  let parent = input.parentNode.parentNode; //el checkbox esta dentro de un td y obtengo la fila(tr) para trabajar en sus elementos hijos
  let pHijos = parent.querySelectorAll("td");
  pHijos.forEach((h, index) => {
    if (index == 0) {
      input.type = "checkbox";
      input.value = "";
      input.checked = false;
    } else {
      h.contentEditable = false;
      h.classList.remove("editableOn");
      h.textContent = "Ahora ya no tengo la clase editableOn";
    }
  });
  input.removeEventListener("click", funcionAceptar);
  console.log("Dejo de estar a la escucha")
}

input.addEventListener("click", funcionAceptar);
<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>

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>

masterguru
  • 16k
  • 5
  • 15
  • 28