5

En el codigo que dejare aqui abajo explico brevemente como trato de eliminar un eventListener a un elemento pero usando el removeEventListener este no tiene efecto alguno.

let input = document.querySelector("input");
input.type = "button"; //originalmente es un checkbox
input.value = "aceptar";
//al usar el checkbox como un button agrego un eventListener(click)
input.addEventListener("click", function() {
    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) {
        //al dar click devuelvo el button a checkbox
            input.type = "checkbox";
            input.value = "";
            input.checked = false;
        } else {
            h.contentEditable = false; //anteriormente hice editables mis campos
            h.classList.remove("editableOn");
        }
    });
    //y lo que intento hacer es que luego de ejecutar las lineas de codigo anteriores, remueve el eventListener(click)
    input.removeEventListener("click", function() {
        console.log("eventListener eliminado");
    });
    //pero el removeEventListener no me funciona
});

2
  • 4
    Alternativamente a la excelente respuesta de masterguru usando removeEventListener, puedes remover todos los eventos click usando input.onclick = null. La diferencia radica en que esta solución que te propongo borra TODOS los eventos click asociados al input. En cambio, con removeEventListener borras el evento asociado a una función específica.
    – Jaime
    Commented el 2 may. 2022 a las 22:03
  • Añadiendo un comentario, a la respuesta ya echa; para hacer un removeEventListener(), segun la documentacion, debes hacer coincidir los parametros del add con el remove para que pueda funcionar correctamente. Saludos
    – Artes
    Commented el 2 may. 2022 a las 22:08

1 respuesta 1

12

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.

Aquí el enlace directo a la documentación de esta opción "once" (en inglés).

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:

{once:true}

y usarlo como tercer parámetro, después de la función.

Aquí un ejemplo funcional:

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>

9
  • Probe de exactamente como lo dejaste en la respuesta pero en la definicion de la function esta se ejecuta antes de que le de clic, no se si es porque esta este en un forEach o porque esta siendo ejecutada dentro de un metodo.
    – LexxCh
    Commented el 2 may. 2022 a las 22:22
  • No pongas la función en un forEach, dejala fuera, aunque no creo que ese sea el problema. Tendria que ver todo tu código para entender tu problema actual. Si ejecutas esta respuesta aquí funciona, que es el escenario que has puesto tu mismo en la pregunta. No cambies la pregunta, haz una nueva con el nuevo escenario en todo caso.
    – masterguru
    Commented el 2 may. 2022 a las 22:25
  • Acabo de agregar una segunda solución en mi respuesta que quizás te irá mejor en tu escenario. Ya me dirás.
    – masterguru
    Commented el 2 may. 2022 a las 23:07
  • Lo acabo de subir a github por si alguien desea colaborarme con posibles soluciones... github.com/JLex11/DataTable
    – LexxCh
    Commented el 2 may. 2022 a las 23:11
  • 1
    @Triby: Es que en el español no esta traducido todo el inglés, y no salia bien documentada esa opción... en el ingles se ve aqui: developer.mozilla.org/en-US/docs/Web/API/EventTarget/…
    – masterguru
    Commented el 2 may. 2022 a las 23:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.