var button = document.getElementById("enter"); var input = document.getElementById("userinput"); var ul = document.querySelector("ul"); var list=document.querySelectorAll("li")[0]; function inputLength(){ return input.value.length; } function createListElement(){ var li=document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); input.value=""; } function addListAfterClick(){ if (inputLength()>0){ createListElement(); } } function removeList(){ ul.childNode.removeChild(); } function addListAfterEnter(event){ if(inputLength()>0 && event.keyCode==13){ createListElement(); } } button.addEventListener("click", addListAfterClick); input.addEventListener("keypress", addListAfterEnter); list.addEventListener("dblclick", removeList);Estoy tratando de crear una lista de compras, donde quiero crear una función, cuando hago doble clic en cualquier
Recibo el siguiente mensaje de error en el registro de la consola:
dom-event.js: 26 TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo 'removeChild') en HTMLLIElement.removeList
Element.childNode no existe en elementos HTML. Sin embargo, tiene Element.childNodes ( https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes ) que devuelve una colección de todos los elementos anidados en el Element dado.
En su caso, le sugiero que use un detector de eventos para cada li y lo elimine cuando se haga clic (o se haga doble clic).
Ejemplo :
const l = document.getElementById("dynlist"); const items_data = ["some", "list", "items"]; function onListItemClick(event) { l.removeChild(event.target) } items_data.forEach(lidata => { const li = document.createElement("li"); li.textContent = lidata; li.addEventListener("click", onListItemClick); l.appendChild(li); }) <ul id="dynlist"> </ul>