JavaScript 待办事项列表项现在包含删除按钮

Question

我正在尝试向列表中的每个项目添加删除按钮。只要我没有删除按钮，添加它们就可以工作。

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。

只要我不尝试添加删除功能，添加列表项就可以工作。

Answer 1

您的代码中有一些错误。

• 您在点击事件中使用了“onClick”而不是“click”
• 您的点击事件分配实际上正在运行或解释删除函数，并尝试使用该函数的返回值作为点击函数。
• 您还传入了列表项 HTML 元素，而不是函数所需的 ID。然后，该函数尝试使用元素本身来查找该元素，然后删除具有相同参数的子元素 - 这将始终返回未定义。

您需要将其包装在另一个函数中，该函数返回要在单击时执行的函数，并修复该错误，如下所示：

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

To Do List

    Add