我一直在创建一个待办事项列表，每个条目有两个按钮，“完成”用于逐行完成的任务，“删除”用于删除它。当我删除第二个项目时，它会删除第一个项目而不是第二个项目。我怎样才能解决这个问题？谢谢。这是 HTML<body><header> <h1>To Do List</h1> <div class="addItems"> <input type="text" name="text" id="addThis" onfocus="this.value=''"> <input type="button" value="Add" id="addBtn"> </div></header><section class="checkList"> <ul class="list"></ul> </section>这是JSaddButton.addEventListener('click' , add);function add(){ let input = document.getElementById('addThis').value; let newLi = document.createElement('li'); newLi.id = "listNewItem"; newLi.style.listStyleType = "none"; newLi.style.backgroundColor = "#f4f4f4"; newLi.style.padding = "10px"; newLi.style.marginBottom = "10px"; newLi.appendChild(document.createTextNode(input)); let deleteBtn = document.createElement('button') console.log(newLi); let list = document.querySelector('.list'); list.insertBefore(newLi, list.childNodes[2]); let delBtn = document.createElement('button'); delBtn.id = "doneButn"; delBtn.className = "delete"; delBtn.setAttribute("onclick" , "done()"); delBtn.appendChild(document.createTextNode("Remove")); newLi.appendChild(delBtn); let doneSubBtn = document.createElement('button'); doneSubBtn.id = "alreadyDone"; doneSubBtn.className = "done"; doneSubBtn.setAttribute("onclick" , "finished()"); doneSubBtn.appendChild(document.createTextNode("Done")); newLi.appendChild(doneSubBtn);}function done(){ let del = document.getElementById('doneButn'); let li = del.parentNode; li.remove();}function finished(){ let liText = document.getElementById('alreadyDone').parentNode; liText.style.textDecoration = "line-through";}javascripthtmlCSS
1 回答
MMTTMM
TA贡献1869条经验 获得超4个赞
您有更多具有相同 ID ( doneButn) 的元素 - 那么第一个元素将成为目标（ID 必须是唯一的）。
使用函数参数告诉 JS 应该定位哪个元素。
delBtn.setAttribute("onclick" , "done(this)");
^^^^
...
function done(el){
// ^^
let li = el.parentNode;
// ^^
li.remove();
}
添加回答
举报
0/150
提交
取消