Skip to main content
se añadieron 1160 caracteres en el cuerpo
Origen Enlace

Si pegas el html sería más fácil detectar el error. 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);
    }
}

Si pegas el html sería más fácil detectar el error. 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]);
  }
}

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);
    }
}
Origen Enlace

Si pegas el html sería más fácil detectar el error. 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]);
  }
}