1

So I have a simple todo list page and each item on the list is accompanied by a checkbox that when checked should remove the item from the list. However, this functionality only works for the top item. Items 2, 3 etc remain when the box is checked. What can I do to remove the subsequent list items when checked?

I am using Node.JS with Express, MongoDB w/Mongoose and Body Parser withing the app.js file. Below is the delete functionality:

app.post("/delete", function(req,res){

  const checkedItemId = req.body.checkbox;
  const listName = req.body.listName;

  if (listName === "Today"){
    Item.findByIdAndRemove(checkedItemId, function(err){
      if(!err){
        console.log("item deleted");
        console.log(checkedItemId);
        console.log(listName);
        res.redirect("/");
      }
    });
  } else {
    List.findOneAndUpdate({name: listName}, {$pull: {items: {_id: checkedItemId}}}, function(err, foundList){
      if (!err){
        res.redirect("/" + listName);
      }
    });
  }
});

Here is the list.ejs files that is referenced from the code above:

<div class="box" id="heading">
    <h1> <%= listTitle %> </h1>
  </div>

  <div class="box">
    <form class="" action="/delete" method="post">
      <% newListItems.forEach(function(item){ %>
        <div class="item">
          <input type="checkbox" onChange="this.form.submit()"  value="<%= item._id %>" name="checkbox">
          <p><%=  item.name  %></p>
        </div>
        <input type="hidden" name="listName" value="<%= listTitle %>"></input>
    </form>
      <% }); %>

      <form class="item" action="/" method="post">
        <input type="text" name="newItem" placeholder="New Item" autocomplete="off">
        <button type="submit" name="list" value="<%= listTitle %>">+</button>
      </form>
  </div>
Zack
  • 23
  • 4
  • Take a look at https://stackoverflow.com/a/9073794/2282634 – Joe Jul 06 '20 at 02:23
  • Thank you for the reference. After looking at the ejs, the for each loop was not encompassing the html form. I moved the for each loop to encompass the form and now it works. – Zack Jul 06 '20 at 19:58

0 Answers0