CODEWITHSUNDEEP
node.jsmongodbexpressmongoose
Chris Faux
Chris Faux

Reputation: 135

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

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.

Upvotes: 0

Views: 670

Answers (3)

Vector
Vector

Reputation: 29

The code is not working because of the <p></p> 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 <span><p><%= item.name %></p></span>, 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") -%>

Upvotes: 0

Chris Faux
Chris Faux

Reputation: 135

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

Upvotes: 0

Erenn
Erenn

Reputation: 683

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

Upvotes: 1

Related Questions