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!!