0

Tengo varios div con botones los cuales tienen el evento de eliminar el nodo cada vez que se de click en ellos, o sea un click elimina el nodo en el que están, el primer problema que se da click una vez y luego se elimina el evento de los nodos que quedan, ahora el segundo problema es cuando se crean nodos no obtiene el evento.

let btnEliminar = document.querySelector('.idEliminar')
btnEliminar.addEventListener('click', eliminarUsuario, false)
function eliminarUsuario (evento) {
  let _id = evento.target.getAttribute('idAttr')
  let opcion = confirm("Esta seguro que desea eliminar?")
  if (opcion) {
    let nodo = document.querySelector(`#usuario-${cortarCadena(_id)}`)
    nodo.parentNode.removeChild(nodo)
  }
}
1
  • 2
    ¿Seguro que estás asociando el evento de manera correcta? Tal y como está el código, sólo se va a asociar al primer elemento con clase .idEliminar y no a los demás (porque estás usando querySelector en lugar de querySelectorAll, además de que no se está iterando para asociar el controlador de evento).
    – Alvaro Montoro
    el 28 may. 2019 a las 20:44

2 respuestas 2

1

Existen varios problemas con esto... pero básicamente puedes ciclar de manera tradicional obteniendo tus elementos por clases o tags para agregarle el evento a cada coincidencia en el DOM.

Esto está pasando porque estas seleccionando tus elementos con querySelector, esto solo te agregará el evento al primer elemento que coincida, puedes utilizar querySelectorAll o como explico en el ejemplo en todo caso. Como adicional no especifiques el argumento useCapture.

let btnEliminar = document.getElementsByTagName('button')

for (var i=0; i < btnEliminar.length; i++) {
  btnEliminar[i].addEventListener('click', eliminarUsuario)
}

function eliminarUsuario(e) {
  let _id = e.target.value;
  console.log(_id)
  let opcion = confirm("Esta seguro que desea eliminar?")
  if (opcion) {
     let nodo = document.getElementById(_id)
     nodo.remove();
  }
}
<button value="id1">Eliminar id1</button>
<div id="id1">
  <p>Este div tiene la id id1</p>
</div>

<button value="id2">Eliminar id2</button>
<div id="id2">
  <p>Este div tiene la id id2</p>
</div>

<button value="id3">Eliminar id3</button>
<div id="id3">
  <p>Este div tiene la id id3</p>
</div>

1

Lo que te pasa es que no estás obteniendo los nuevos cambios de los nodos y entonces no les agregás el listener al evento. A continuación te dejo dos opciones, una con jQuery (es más sencillo y más si recién estás empezando con javascript) y la otra es con javascript puro que es similar a lo que hace.

Usando jQuery con .on()

// esto es para ejecutar todo lo que esté por dentro una vez
// que cargue el DOM
$(document).ready(function() {
  // $('.idEliminar') -> obtiene los elementos con este selector
  // .on() -> para capturar el evento
  // el primer parámetro es el tipo de evento
  // el segundo es otro selector del nodo padre
  // el tercero es la función a ejecutar
  $('.idEliminar').on('click', '.parent-element', eliminarUsuario);

  function eliminarUsuario(evento) {
    let _id = evento.target.getAttribute('idAttr')
    let opcion = confirm("Esta seguro que desea eliminar?")
    if (opcion) {
    let nodo = document.querySelector(`#usuario-${cortarCadena(_id)}`)
    nodo.parentNode.removeChild(nodo)
    }
  }
});

Usando javascript y generando una función similar al .on()

function delegate(el, evt, sel, handler) {
  el.addEventListener(evt, function(event) {
    var t = event.target;
    while (t && t !== this) {
      if (t.matches(sel)) {
        handler.call(t, event);
      }
      t = t.parentNode;
    }
  });
}

// uso de la función
delegate(document, 'click', '.parent-element', eliminarUsuario);

function eliminarUsuario(evento) {
  let _id = evento.target.getAttribute('idAttr')
  let opcion = confirm("Esta seguro que desea eliminar?")
  if (opcion) {
  let nodo = document.querySelector(`#usuario-${cortarCadena(_id)}`)
  nodo.parentNode.removeChild(nodo)
  }
}

Fuente de Javascript equivalent to $.on

Tu Respuesta

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

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