我正在制作一个通用的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>
答案 0 :(得分: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();
});
以下是一个例子:
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;
答案 1 :(得分:0)
删除元素不需要ID:
<u onclick=this.parentNode.removeChild(this)> Click to remove </u>
&#13;
或event.target
获取点击的元素:
<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来添加节点):
<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;