JavaScript to-do list items now include delete buttons

Question

I'm trying to add a delete button to each item in a list. Adding them works as long as I don't have a delete button.

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>

I tried a method where on each list item you create you "onclick" = deleteitem(item). I have tried using queryselector, getelementbyId and queryselectorall in the delete function.

Adding list items works as long as I don't try to add delete functionality.

Answer 1

There are some errors in your code.

• You used "onClick" instead of "click" in the click event
• Your click event assignment is actually running or interpreting the delete function and trying to use that function's return value as the click function.
• You are also passing in the list item HTML element instead of the ID required by the function. The function then tries to find the element using the element itself and then removes the child elements with the same argument - this will always return undefined.

You need to wrap it in another function that returns a function to be executed on click and fix the error like this:

  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