Como hacer una lista de la compra con Javascript

window.onload = init;
        function init(){
            botonEnvio = document.querySelector('[type="button"]');
            nuevoItem = document.querySelector('[type="text"]');
            listaCompra = document.getElementById("listaCompra");
            
            botonEnvio.addEventListener("click",anadir);
        }

Cuando se termina de cargar la página llamamos la función init mediante el evento onload. Fijaros que no lleva paréntesis porqué no nos interesa su ejecución en el momento de lectura del javascript sino cuando suceda el evento onload.

Fijaros que las variables botonEnvio, nuevoItem y listaCompra no llevan la palabra var para que sean de ámbito global.

Usamos querySelector a modo didáctico.

function anadir(e){
            evento = e || window.event;
            if (nuevoItem.value == ""){
                evento.preventDefault();
            }else{
            var lista = document.createElement("li");
            lista.innerHTML = nuevoItem.value;
            lista.addEventListener("dblclick",eliminarLi);
            listaCompra.appendChild(lista);
            nuevoItem.value = "";
            }
        }

Para entender bien la función anadir recomiendo esta lectura.

Si el cajetín de texto está vacío el botón de enviar información para ser añadida a la lista no se ejecuta gracias a preventDefault().

En caso de que si se deba añadir elementos primero creamos el nodo y luego lo añadimos. Fijaros en la inclusión de la instrucción addEventListener() para todos los elementos <li>.

function eliminarLi(){
            this.parentNode.removeChild(this);
        }

Un nodo no se puede autodestruir.

Debemos llamar al elemento padre y desde este eliminar al hijo.

El hijo es siempre la palabra this.