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
    Commented 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
    Commented 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. Commented 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. Commented 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. Commented 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 Commented el 20 may. 2018 a las 17:15

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.