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>