javascript - 通过 ID 而不是索引从 DOM 中删除元素

Question

我正在制作一个通用的待办事项列表，我的待办事项列表的问题是它根据索引删除元素，同时需要它们的 ID 来获取要删除的位置 (例如:假设我在我的待办事项列表中添加了 6 个项目，它们都有一个从 1 到 6 的 id，如果我删除 3 和 4，然后我尝试删除 6，它将不起作用，因为它尝试获取 ID元素 6 的值为 6，但它尝试删除索引 6 处的项目，而不是 ID 6)

请帮我根据 ID 而不是索引来删除它们，但我希望使用普通 javascript，而不是 jQuery，谢谢。

ul.addEventListener("click", function(event){
    console.log(event.target.parentNode.id);
    if (event.target.className === "buttonClass"){
        for (let z = 0; z < ul.children.length; z++){
            let eh = event.target.parentNode.id;
            ul.children.getAttribute("id")[eh].remove()
        }
    }
}

虽然我认为这段代码已经足够了，但我会将其全部添加到其下面

let ul = document.querySelector("ul")
let li = document.querySelectorAll("li");  
let selectInput = document.querySelector("input");

let createLi = function(){


    let createLi = document.createElement("li");
    let addNow = ul.appendChild(createLi);
    addNow.textContent = selectInput.value;
    selectInput.value = "";
    let btn = document.createElement("button");
    let createButton = addNow.appendChild(btn);
    createButton.textContent = "Button";
    createButton.setAttribute("class", "buttonClass");

   for(let i = 0; i < ul.children.length; i++){
       addNow.setAttribute("id", i)  
   }
};

下面是 HTML

<button id="main" onclick="createLi()"> add</button>
<input type="text" class="input">
<ul>

</ul>

Answer 1

您可以通过其 ID 获取 li 元素并将其删除，或者只需对具有相同 li 标记的父元素使用“remove”:

ul.addEventListener("click", function(event){

    let id = event.target.parentNode.id;
    document.getElementById(id).remove();

    // Or directly

    event.target.parentNode.remove();

});

这是一个例子:

let ul = document.querySelector("ul")
let li = document.querySelectorAll("li");  
let selectInput = document.querySelector("input");

let createLi = function() {


    let createLi = document.createElement("li");
    let addNow = ul.appendChild(createLi);
    addNow.textContent = selectInput.value;
    selectInput.value = "";
    let btn = document.createElement("button");
    let createButton = addNow.appendChild(btn);
    createButton.textContent = "Button";
    createButton.setAttribute("class", "buttonClass");

   for(let i = 0; i < ul.children.length; i++){
       addNow.setAttribute("id", i);
   }
};


ul.addEventListener("click", function(event){
    console.log(event.target.parentNode.id);
    event.target.parentNode.remove();
});

<button id="main" onclick="createLi()"> add</button>
<input type="text" class="input">
<ul>

</ul>