Error, eliminar elementos

[jaskonio]

Hola buenas noches, estoy empezando con javascript y me dio por crear una "lista de la compra", puedo añadir elementos con total normalidad, pero tengo un gran problema a la hora de querer eliminar varios elementos.

html

Código HTML:

<div class="ingresar">
        <input type="text" id="botton" name="ingresar" maxlength="20" onfocus="" placeholder="añadir a la lista">
        <input type="submit" id='enviar' value="añadir" onclick="enviar()">
    </div>
    <div id="contenido">
        <ul id="lista"></ul>
    </div>
 

Código Javascript:

contador = 0;
            valor = 0;
            n=0;
            function enviar () {
                var botton = document.getElementById('botton');
                var contenido = document.getElementById('botton').value;
                var lista = document.getElementById('lista');
 
                if (contenido == '') {
                    var ingresar = document.getElementsByClassName('ingresar');
                    if (contador== 0) {
                        ingresar[0].innerHTML += '<p id="error">No ha escrito nada, por favor añada un elemento a la lista</p>';
                        contador++;
                    }
                    else {
                        
                    }
                }
                else{
                    if (contador == 1) {
                        var parrafo =document.getElementById('error');
                        parrafo.parentNode.removeChild(parrafo);
                    }
 
                    lista.innerHTML += "<li class='compra"+n+"'><span class='borrar'>x</span>" + contenido+ "</li>";
                    valor++;
                    n++;
                    
                }
                botton.value='';
                borrar();
            }
 
            function borrar () {
                compras = document.getElementsByTagName('li');
                for (var i = 0; i < compras.length; i++) {
                    eliminar(i);
                };
 
            }
            function eliminar (argument) {
                var borrar = document.getElementsByClassName('borrar');
                borrar[argument].addEventListener('click',function  () {
                    compras[argument].remove();
                })
            }
 

Al añadir por ejemplo 6 elementos LI Y querer eliminar de forma aleatoria me da fallos en la funcion remove().
He probado en añadir una funcion que vaya actualizando el array de elemetos añadidos pero aun así no puedo o quizá lo este haciendo mal. ):
SALUDOS!!

[Alexis88]

¿Y cuál es el fallo en concreto?

Estoy notando que utilizas a la variable compras dentro del callback que a su vez está en la función eliminar(), sin embargo, nunca la pasaste como argumento, por lo que ahí no posee valor alguno.

Un saludo

[jaskonio]

Bueno, mira el fallo es este:(es un gif)
[URL="http://gfycat.com/FearlessTatteredArmadillo"]http://gfycat.com/FearlessTatteredArmadillo[/URL]

al parecer no actualiza el array de los elementos LI una vez ejecutada la funcion eliminar
y por lo que veo los valores que pasa la funcion Borrar quedan obsoletos al no actualizarse.
Y no veo como puedo hacerlo
Gracias.

[Alexis88]

Es por lo que te dije en mi anterior respuesta; la variable compras no está definida en el contexto del callback que ejecutas con el evento click. Pásala como argumento a la función cuando hagas la llamada en el bucle.

Un saludo