Question

我正在制作一个通用的todolist，我的todolist的问题是它根据他们的INDEX删除元素，同时它们需要他们的ID来获取删除位置（例如：让我说我在我的todolist中添加了6个项目，他们都有1到6的id，如果我删除3和4，然后我尝试删除6，它不会工作，因为它尝试获取元素6的ID为6，但它尝试删除索引6处的项而不是ID 6）

请帮我根据他们的ID而不是索引删除它们但我想用PLAIN 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 BELOW

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

</ul>

Answer 1

你可以通过它的ID获取你的li元素并将其删除，或者只使用remove到同一个li标签的父元素：

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

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

    // Or directly

    event.target.parentNode.remove();

});

以下是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

删除元素不需要ID：

＆＃13;

<u onclick=this.parentNode.removeChild(this)> Click to remove </u>

＆＃13;

或event.target获取点击的元素：

＆＃13;

<ul onclick=event.target.parentNode.removeChild(event.target)>
  <li> Item 1 </li>
  <li> Item 2 </li>
  <li> Item 3 </li>
  <li> Item 4 </li>
</ul>

＆＃13;

奖励：它甚至可以伪造成CSS（但仍需要JavaScript来添加节点）：

＆＃13;

<style>[type], :checked + * { display: none }</style>
<input id=i><button onclick="i.value&&body.insertAdjacentHTML('beforeend', `<input type=
checkbox id=${n=Date.now()}><label for=${n}>${i.value}<br></label>`)">Add</button><br>

<input type=checkbox id=1><label for=1> Item 1 <br></label>
<input type=checkbox id=2><label for=2> Item 2 <br></label>
<input type=checkbox id=3><label for=3> Item 3 <br></label>
<input type=checkbox id=4><label for=4> Item 4 <br></label>

＆＃13;

通过ID从DOM中删除元素，而非索引

2 个答案: