adding delete button to javascript to do list items

Question

I am trying to add delete button to each item in a list. Adding them works as long as I do not have the 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 thing where on each list item created, you can 'onclick'=deleteitem(item). I have tried using queryselector, getelementbyId, and queryselectorall in the delete function.

Adding list items works as long as I do not try adding the delete functionality.

there is a lot to cover here. first, in the addnew method, u just want to do what the method name says. add a new todo. so all other stuff has to be moved out of the method. to continue, the dom objects u retrieved are typically declared as const instead of var and placed at the start of the script. third, for not constant variables, use let instead of var. also, follow conventions, addnew should be written in camelCase - addNew. finally and very important, tabulate and clean the code, so its more readable — ericmp
– ericmp, Commented Nov 18, 2022 at 12:40
Please trim your code to make it easier to find your problem. Follow these guidelines to create a minimal reproducible example. — Community
– Community Bot, Commented Nov 18, 2022 at 12:54

Marc L. · Accepted Answer · 2022-11-18 12:50:53Z

There's a few errors in your code.

You've used 'onClick' instead of 'click' for the click event
Your click event assignment is actually running or interpreting the remove function and attempting to use the return value of the function as the click function.
You've also passed in the list item HTML element as opposed to the ID, which the function requires. This function then tries to use the element itself to find the element and then remove a child element with the same parameter - this will always return undefined.

You need to wrap this in another function that returns the function to be performed on click, and fix that error, as below:

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

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

Collectives™ on Stack Overflow

adding delete button to javascript to do list items

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related