如何在雙擊時刪除 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);

我正在嘗試創建一個購物清單，當我雙擊任何一個時，我想在其中創建一個 function

，該項目應該被刪除，並通過單擊添加線。

我在控制台日志中收到以下錯誤提示：

dom-event.js:26 Uncaught TypeError: 無法在 HTMLLIElement.removeList 中讀取未定義的屬性（讀取“removeChild”）

Answer 1

Element.childNode不存在於 HTML 個元素上。 但是，您有Element.childNodes ( https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes )，它返回嵌套在給定Element下的所有元素的集合。

在您的情況下，我建議您為每個li使用一個事件偵聽器，並在單擊（或雙擊）時將其刪除。

例子：

 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>