1

Tengo un pequeño problema con javascript; tengo un for que sólo elimina número nones para borrar elementos de una lista. Les adjunto el código que tengo y el error que me aparece.

function borrar() {
  var lista = document.getElementById('lista-dinamica');
  var elementos = document.getElementsByClassName('list-group-item');
  var x = lista.children.length;
  console.log(x);
  for (var i = 0; i < x; i++) {
    lista.removeChild(elementos[i]);
  }
}

Este es el error:

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at borrar (app.js:68) at HTMLButtonElement.onclick (index.html:73) borrar @ app.js:68 onclick @ index.html:73

3
  • 1
    Que es lo que quieres conseguir?
    – DevMind
    el 19 may. 2018 a las 7:49
  • Los fragmentos de código son para poder probar el código HTML/JS, ya que te dicidiste a usarlos pudiste haber puesto algo funcional, incluyendo el HTML donde se encuentran los elementos lista-dinamica y list-group-item, de ese modo se habría podido verificar lo que ocurre. Tampoco explicas con toda claridad lo que quieres. A veces ocurre que en las respuestas te pueden sugerir mejores métodos, cuando se ha entendido mejor lo que se quiere lograr.
    – A. Cedano
    el 19 may. 2018 a las 11:46
  • Perdón, mi intención es borrar una lista que se llena con la permutación de una cadena de caracteres, el problema es que me elimina solo los número nones y quedan todos los número pares, hasta que se le da click por segunda vez al botón borrar. el 20 may. 2018 a las 2:35

1 respuesta 1

2

Por lo pronto tu variable x debería ser la longitud de elementos no de los hijos de lista

function borrar() {
  var lista = document.getElementById('lista-dinamica');
  var elementos = document.getElementsByClassName('list-group-item');
  var x = elementos.length;
  console.log(x);
  for (var i = 0; i < x; i++) {
    lista.removeChild(elementos[i]);
  }
}

Pero el problema de fondo es bastante conocido. Cada vez que iteras y eliminas un elemento estás modificando lista, por tanto el hijo [i] de lista cada vez será distinto.

Por ejemplo, al arracar tu lista será así:

<ul>
    <li> a </li> <!-- elemento[0] -->
    <li> b </li> <!-- elemento[1] -->
    <li> c </li> <!-- elemento[2] -->
    <li> d </li> <!-- elemento[3] -->
</ul>

Pero tras la primera iteracción y haber ejecutado, lista.removeChild(elementos[0]); lo siguiente a ejecutar es lista.removeChild(elementos[1]);

<ul>
    <!-- <li> a </li> antiguo elemento[0], ahora eliminado-->
    <li> b </li> <!-- elemento[0] -->
    <li> c </li> <!-- elemento[1] -->
    <li> d </li> <!-- elemento[2] -->
</ul>

Por lo que se borrara <li> c </li> y no b

La solución más habitual es usar un código como este:

function borrar() {
    var lista = document.getElementById('lista-dinamica');
    while (lista.firstChild) {
         lista.removeChild(lista.firstChild);
    }
}
3
  • Hola, gracias, ya hice el cambio y me sigue borrando solo los número nones. el 20 may. 2018 a las 2:36
  • Ya he entendido tu problema. He modificado la respuesta. Recuerda marcarla como aceptada, si con esto se soluciona. el 20 may. 2018 a las 10:38
  • Muchas gracias, logre hacer que borrara toda la lista eliminado en cada iteración el elementos[0], pero tu solución es mucho más corta y eficaz.e el 20 may. 2018 a las 17:15

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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