Item senarai tugasan JavaScript kini termasuk butang padam

Question

Saya cuba menambah butang padam pada setiap item dalam senarai. Menambahnya berfungsi selagi saya tidak mempunyai butang padam.

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>

Saya mencuba kaedah di mana pada setiap item senarai anda buat anda "onclick" = deleteitem(item). Saya telah mencuba menggunakan queryselector, getelementbyId dan queryselectorall dalam fungsi padam.

Menambah item senarai berfungsi selagi saya tidak cuba menambah fungsi pemadaman.

Answer 1

Terdapat beberapa ralat dalam kod anda.

• Anda menggunakan "onClick" dan bukannya "klik" dalam acara klik
• Tugasan acara klik anda sebenarnya sedang menjalankan atau mentafsir fungsi padam dan cuba menggunakan nilai pulangan fungsi itu sebagai fungsi klik.
• Anda juga memasukkan elemen HTML item senarai dan bukannya ID yang diperlukan oleh fungsi tersebut. Fungsi kemudian cuba mencari elemen menggunakan elemen itu sendiri, kemudian mengalih keluar elemen anak dengan hujah yang sama - ini akan sentiasa kembali tidak ditentukan.

Anda perlu membungkusnya dalam fungsi lain yang mengembalikan fungsi yang akan dilaksanakan pada klik dan betulkan ralat seperti ini:

  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