delete list items from mongo database using mongoose, express, nodejs-CodePudding

I'm trying to implement a simple backend todo list using mongoose, mongo, express and ejs.

I'm stuck while adding a "delete item from mongo using mongoose by pressing the html checkbox"

The code I'm trying to implement happens between line 76 and 86 of "app.js":


app.post('/delete', (req, res) => {
    // DELETE CHECKED ITEM ON list.ejs FORM USING ITS _id
    const checkedItemId = req.body.checkbox;
    console.log(checkedItemId);
    Item.findByIdAndRemove(checkedItemId, (err) => {
        if (!err) {
            console.log('Successfully deleted checked item');
            res.redirect('/');
        }
    });
});

Once I check the checkbox the item is not deleted and remain visible, also if I check the checkbox twice the ".findByAndRemove" funcion seems to work and gives me "Succesfully Deleted" but once I check the mongo collection with "db.items.find()" the item is still there.

the full project can be found on:

https://github.com/emanuelefavero/mongoose-todolist.git

Please remember to start the mongo server before launching the app, also run "npm i" inside the project directory to install required npm packages after downlading the project.

Thanks.

CodePudding user response：

Be sure the id you are getting is the ObjectId and give callback function the second parameter so you can get better error messages.

Item.findByIdAndRemove(checkedItemId, (err, docs) => {
  if (err){
    console.log(err)
  }
  else{
    console.log("Removed Item: ", docs);
  }
});

CodePudding user response：

The issue is not on the backend app.js but in the front end ejs file. The following is the code that solved this issue:

NOTE: items.forEach() now became newListItems.forEach()

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

<!-- BACKGROUND IMAGE -->
<div class="background-image-container">
    <div class="background-image"></div>
</div>

<!-- TITLE -->
<div class="list-container">
    <div class="title">
        <h2><%= listTitle %></h2>
    </div>

    <div class="list-card">
        <% newListItems.forEach(function(item){ %>

        <form action="/delete" method="post">
            <div class="item">
                <input
                    type="checkbox"
                    name="checkbox"
                    value="<%=item._id%>"
                    onChange="this.form.submit()"
                />

                <span class="checkbox-label"><%=item.name%></span>
            </div>

            <input type="hidden" name="listName" value="<%= listTitle %>" />
        </form>
        <% }) %>

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

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