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