I want to delete an item from my database when I check the checkbox Here is my app.js file code

const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");

const app = express();

app.set('view engine', 'ejs');

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));

mongoose.connect("mongodb://localhost:27017/todolistDB");

const itemsSchema = new mongoose.Schema({
  name: String
});

const Item = mongoose.model(
  "Item", itemsSchema
);

const defaultItem1 = new Item({
  name: "Welcome to your todolist!"
});
const defaultItem2 = new Item({
  name: "Hit the   button to add a new item."
});
const defaultItem3 = new Item({
  name: "<-- Hit this to delete an item."
});

const defaultItems = [defaultItem1, defaultItem2, defaultItem3];


app.get("/", function (req, res) {
  Item.find({}, function (err, foundItems) {  //Model.find({condition}, function (err, result){})

    if (foundItems.length === 0) {
      Item.insertMany(defaultItems, function (err) {

        if (err) {
          console.log(err);
        } else {
          console.log("Items added successfully!");
        }
        res.redirect("/");
      });
    } else {
      res.render("list", { listTitle: "Today", newListItems: foundItems });
    }
  })
});

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

  const itemName = req.body.newItem;

  const item = new Item({
    name: itemName
  });

  item.save();

  res.redirect("/");

});

app.post("/deleteItems", function (req, res){
  console.log(req.body.checkbox);
  const checkedItemId = req.body.checkbox;
  Item.findByIdAndDelete(checkedItemId, function (err){
    if (!err) {
      console.log("Successfully deleted checked item");
    }
  });
});


app.get("/work", function (req, res) {
  res.render("list", { listTitle: "Work List", newListItems: workItems });
});

app.get("/about", function (req, res) {
  res.render("about");
});

app.listen(3000, function () {
  console.log("Server started on port 3000");
});

When I try to run above code, but I am not able to delete the particular item from the list

Screenshot of Interface of the web app and server console

and also if I try to check in my database, then the item is still present there

Database Console Screenshot

And here is my list.ejs code

<%- include("header") -%>

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

  <div >
    <% newListItems.forEach(item=> { %>
      <form action="/deleteItems" method="post">
        <div >
          <input type="checkbox" name="checkbox" value="<%= item._id %> " onChange="this.form.submit()">
          <p>
            <%= item.name %>
          </p>
        </div>
      </form>
      <% }); %>

        <form  action="/" method="post">
          <input type="text" name="newItem" placeholder="New Item" autocomplete="off">
          <button type="submit" name="list"> </button>
        </form>
  </div>

  <%- include("footer") -%>

CodePudding user response：

Yes i had the same issue for weeks and after so many frustration and time trying to find out while my code is not responding,I finally got where the issue is coming from ,its from the p tag which houses the item.name do make sure to cover it with a span tag and it will work, it did for me checkout the code below

    <%- include("header") -%>

<!-- Title Rendering -->
<div  id="heading">
  <h1><%= listTitle %></h1>
</div>

<!-- Deleting an item using a checkbox -->

<div >
  <% newListItems.forEach(function(item){ %>

  <form action="/delete" method="post">
    <div >
      <input
        type="checkbox"
        name="checkbox"
        value="<%= item._id %>"
        onChange="this.form.submit()"
      />
      <span><p><%= item.name %></p></span>
    </div>
    <input type="hidden" name="listName" value="<%= listTitle %> " />
  </form>
  <% }) %>

  <!-- New Item Rendering -->

  <form  action="/" method="post">
    <input
      type="text"
      name="newItem"
      placeholder="New Item"
      autocomplete="off"
    />
    <button type="submit" name="list" value="<%= listTitle %> "> </button>
  </form>
</div>

<%- include("footer") -%>