如何在双击时删除 ul 的子元素？

Question

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);

I am trying to create a shopping list, where I want to create a function, when I double click any

, that item should be removed, and add line-through on a single click.

I am getting below error prompt in console log:

dom-event.js:26 Uncaught TypeError: Cannot read properties of undefined (reading 'removeChild') at HTMLLIElement.removeList

Answer 1

Element.childNode doesn't exist on HTML elements. However you have Element.childNodes ( https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes ) that returns a collection of all elements nested under the given Element .

In your case I suggest you'd use an event listener for each li and remove it when it's clicked (or doubleclicked).

Example:

 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>