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][1]. 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][2]:

    function borrar() {
        var lista = document.getElementById('lista-dinamica');
        while (lista.firstChild) {
             lista.removeChild(lista.firstChild);
        }
    }


  [1]: https://stackoverflow.com/a/35007791/930271
  [2]: https://stackoverflow.com/a/3955238/930271