JavaScript-Aufgabenlistenelemente enthalten jetzt Schaltflächen zum Löschen

Question

Ich versuche, jedem Element in der Liste eine Schaltfläche zum Löschen hinzuzufügen. Das Hinzufügen funktioniert, solange ich keine Schaltfläche zum Löschen habe.

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>

Ich habe eine Methode ausprobiert, bei der Sie für jedes Listenelement, das Sie erstellen, „onclick“ = deleteitem(item) eingeben. Ich habe versucht, queryselector, getelementbyId und queryselectorall in der Löschfunktion zu verwenden.

Das Hinzufügen von Listenelementen funktioniert, solange ich nicht versuche, die Löschfunktion hinzuzufügen.

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