0

I am working on a TO-DO list mini project and I want to delete all checked boxes by pressing the del button .

Note: I want to achieve this without using databases and what to delete object in dolist array.

Link to full code:https://drive.google.com/drive/folders/14eE3mcGHOvaw1zZzI8qsrjn3xkaPk4vX?usp=sharing

Problem I am facing : Since I am using express js how do I collect the response of all checked boxes by app.get function through the delete button ??I know that I have to use splice ,for loop , req.params/req.query to deleting the object but how to connect the delete button with all the checked boxes.

  • How to get req from checked check boxes(using for i of contacts for loop) and connect it to delete button .My add button is working absolutely fine and it pushes object in do_list array on clicking but I am not able to fiure out about deleting checked boxes on clicking del button.

    app.get('/delete',function(req,res) {
    <some code> stuck here




      });


// list.ejs

   <!doctype html>
    <html lang="en">
      <head>

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />

    <!-- Your file css -->


    <link rel="stylesheet" href ="/css/styles.css">


    <title>Hello, world!</title>
    </head>
    <body>
        <h1>TO DO APP</h1>

    <section id ="form-space">
       <form action="/push" method ="POST">
            <div class="form-group ">
              <label for="exampleFormControlInput1 ">DESCRIPTION</label>
              <input type="text" name = "des" class="form-control" id="exampleFormControlInput1" placeholder="What do you need to do?">
            </div>
            <div class="form-group">
              <p>CATEGORY</p> 
              <select class="form-control" id="exampleFormControlSelect1" name ="cat">
                <option>Personal</option>
                <option>Work</option>
                <option>School</option>
                <option>Cleaning</option>
                <option>Other</option>
              </select>
            </div>


            <label>DATE</label>
            <div class="input-group date" data-provide="datepicker" >


                <input type="text" class="form-control" placeholder="Enter Date" name ="date">

                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-th"></span>
                </div>
            </div>

            <div id="btns">
        <button type="submit" class="btn btn-primary btn-lg">Add Task</button>

           <button type="button" id ="del" class="btn btn-secondary btn-lg">Delete Task</button>
            </div>
         </form>

    <div>

    <ul>

    <% for (let i of do_list) { %>
    <div class="card" >

    <input type="checkbox" class="check" >


    <p><%= i.des %></p>



    <p><%= i.cat %></p>



    <p><%= i.date %></p>
    </div>

    <% } %>

    </ul>

    </div>

  </section>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
          <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
          <script type="text/javascript" src="/js/list.js"></script>

</body>
</html>
// express js code  (app.js)

const express = require("express");
const path = require('path');
const port = 9000;
const app = express();

app.set('views engine','ejs');
app.set('views',path.join(__dirname,'views'));
app.use(express.urlencoded());
app.use(express.static('assets'));


var dolist = [
{

des:"codechef",
cat:"Personal",
date:"12/25/2020"

},
{
des:"codeforces",
cat:"Work",
date:"12/25/2020"

}

]

app.get("/",function(req,res)
{
    return res.render('list.ejs',{
   
        do_list:dolist
  

    });
});


app.listen(9000,function()
{
console.log("listening to port ");
});



app.post('/push',function(req,res)
{

dolist.push(req.body);
return res.redirect('/');

});

1 Answers1

0

Something like this maybe :

//DELETE
app.route("/remove/:id").get((req, res) => {

const id = req.params.id;

TodoTask.findByIdAndRemove(id, err => {

if (err) return res.send(500, err);
res.redirect("/");
});
});

Check this tutorial,has a edit/delete button explained step by step: https://medium.com/@diogo.fg.pinheiro/simple-to-do-list-app-with-node-js-and-mongodb-chapter-2-3780a1c5b039

Flash
  • 169
  • 1
  • 6