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

Question

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.

score 1 · Answer 1 · answered Nov 16 '21 at 08:56

1

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

answered Nov 16 '21 at 08:56

Erenn

625
6
18

Thanks for your response. I implemented your code and also added the following suggestion to check for valid object id, unfortunately the problem persist. I'm thinking maybe the bug isn't on lines 76-86?, thank you: https://stackoverflow.com/questions/14940660/whats-mongoose-error-cast-to-objectid-failed-for-value-xxx-at-path-id – Chris Faux Nov 16 '21 at 11:44
Now you are getting better error messages. The id you are using is not the Mongo ObjectId. I think you are getting incorrect id's from front-end. – Erenn Nov 16 '21 at 12:18
thanks, yes the problem was from the front end, inside the ejs file. Thank you so much for your help. Unfortunately I'm still not able to find where it specifically was in the code but now it is working. – Chris Faux Nov 16 '21 at 12:52

score 0 · Answer 2 · answered Nov 16 '21 at 12:59

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") -%>

Vector · Answer 3 · 2022-06-24T23:25:43.047

The code is not working because of the  tag used in housing the item.name, its working now even though you seems not to find the reason its because of the span used in closing it like this <%= item.name %>, below is a sample of my code in the same project

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

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

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

<div class="box">
  <% 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><p><%= item.name %></p></span>
    </div>
    <input type="hidden" name="listName" value="<%= listTitle %> " />
  </form>
  <% }) %>

  <!-- New Item Rendering -->

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

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

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

3 Answers3