我正在尝试向列表中的每个项目添加删除按钮。只要我没有删除按钮,添加它们就可以工作。
const newcontainer = document.getElementById("toDoContainers");
//gets number of list items in todolist
//adds list item to list
function deleteitem(paramitem){
var element = document.getElementById(paramitem);
element.remove(paramitem);
}
function addnew(){
let numb = document.getElementById("todolistitems").childElementCount;
var listitem = document.createElement("li");
var reallist = document.getElementById("todolistitems");
var inputvar = document.getElementById("inputfield").value;
var node = document.createTextNode(inputvar);
let numbvar = numb +1;
listitem.appendChild(node);
listitem.setAttribute('id', numbvar);
listitem.addEventListener('onClick', deleteitem(listitem));
reallist.appendChild(listitem);
var inputvar = document.getElementById("inputfield").value="";
// node.appendChild(document.createTextNode(inputvar));
/// document.getElementById("toDoContainers").innerHTML=inputvar;
}
<h1>To Do List</h1>
<div class="container">
<input id="inputfield" type="text"><button id="addToDo" onclick="addnew()">Add</button>
<div class="tO" id="toDoContainers">
<ul id="todolistitems">
</ul>
</div>
</div>
我尝试了一种方法,在创建的每个列表项上,您可以“onclick”=deleteitem(item)。我尝试过在删除函数中使用 queryselector、getelementbyId 和 queryselectorall。
只要我不尝试添加删除功能,添加列表项就可以工作。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
您的代码中有一些错误。
您需要将其包装在另一个函数中,该函数返回要在单击时执行的函数,并修复该错误,如下所示:
const newcontainer = document.getElementById("toDoContainers"); //gets number of list items in todolist //adds list item to list function deleteitem(paramitem) { var element = document.getElementById("list" + paramitem); element.remove(); } function addnew() { let numb = document.getElementById("todolistitems").childElementCount; var listitem = document.createElement("li"); var reallist = document.getElementById("todolistitems"); var inputvar = document.getElementById("inputfield").value; var node = document.createTextNode(inputvar); let numbvar = numb + 1; listitem.appendChild(node); listitem.setAttribute("id", "list" + numbvar); listitem.addEventListener("click", function () { deleteitem(numbvar); }); reallist.appendChild(listitem); var inputvar = (document.getElementById("inputfield").value = ""); // node.appendChild(document.createTextNode(inputvar)); /// document.getElementById("toDoContainers").innerHTML=inputvar; }