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