如果选中复选框，则删除项目待办事项列表答案

【问题标题】：Remove item if checkbox is checked to-do list如果选中复选框，则删除项目待办事项列表
【发布时间】：2020-07-29 17:02:11
【问题描述】：

我正在构建自己的待办事项列表 Web 应用程序。我已经设置了一切，但还剩下一件事。我希望如果选中一个复选框，请将其从数组中删除。我怎样才能使用 DOM 或任何东西来做到这一点？我在 stackoverflow 上找到了一些解决方案，但不知道如何将它与我自己的代码一起使用。请帮我：） enter image description here html:

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

  <div class="box hidden" id="heading">
    <h1> <%= listTitle %> </h1>
  </div>

  <div class="box hidden" id="todo">
    <% for (i = 0; i < newListItem.length; i++) { %>
    <div class="item">
      <input type="checkbox" id="remove">
      <p> <%= newListItem[i] %> </p>
    </div>
    <% }; %>
    <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>

<script type="text/javascript">
//animation
$(document).ready(function () {
    $('#heading').fadeIn(1000).removeClass('hidden');
});

$(document).ready(function () {
    $('#todo').fadeIn(1000).removeClass('hidden');
});

</script>

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

app.js：

//jshint esversion:6

const express = require('express');
const bodyParser = require('body-parser');
const date = require(__dirname + '/date.js')

const app = express();
let items = ["Buy Chocolate" , "Heat Chocolate" , "Eat Chocolate"];
let schoolItems = [];


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

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

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

  let day = date.getDate();
  res.render("todolist", {
    listTitle: day,
    newListItem: items
  });
});

app.post("/", function (req, res) {
  let item = req.body.newItem;
  if (req.body.list === "School") {
    schoolItems.push(item);
    res.redirect("/school");
  } else {
    items.push(item);
    res.redirect("/");
  }

})

app.get("/school", function (req, res) {
  res.render("todolist", {
    listTitle: "School List",
    newListItem: schoolItems
  });
});

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


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

【问题讨论】：

你到底想做什么，如果它只是特定于 UI 的，那么只发布你的 UI 代码，如果它是后端/nodejs 相关的，只发布 nodejs 代码。如果确定问题的范围会容易得多。
如果复选框选中了相关项，我希望将其从 items 数组中删除，并将其从用户界面中删除。
在这种情况下，您必须在服务器端 express 代码中编写一个新路由，并且您还需要更改存储 items 的方式，例如，您需要有一个id 列表中的每一项。
这个范围很广，将问题分解成子问题，如何在 UI 中执行该操作，然后如何将响应发送到后端以同步这是后端数据模型。

标签： javascript html node.js express ejs

【解决方案1】：

我已经使用 express 和 ejs 在我的待办事项列表中完成了它

ejs 文件主体

<body>
    <form id = "new-item-form" action = "/create-item" method = "POST">
        <input type = "text" name = "description" placeholder = "task">
        
        <button type = "submit">ADD TASK</button>
        <button formaction="/remove-item" type="submit"> DELETE TASKS </button>

        <ul>
            <% for( var i = 0; i < item_list.length; i++) { %>
            <li class = "item">
                <input type = "checkbox" name = "check" value = "<%= item_list[i]._id %>"/>
                <div class = "details">
                    <p><%= item_list[i].description %></p>
                </div>
            </li>
            <% } %>
        </ul>
    </form>
</body>

控制器移除项目：-

const Item = require('../models/todo');
module.exports.remove = function(req, res){  
var removeList = req.body.check;

if(typeof removeList === "string"){
    Item.findByIdAndDelete(removeList, function(err){
        if(err){
            console.log('error');
            return;
        }
    });
}
else if(typeof removeList === "object"){
    for(var i = 0 ; i < removeList.length ; i++){
        Item.findByIdAndDelete(removeList[i], function(err){
            if(err){
                console.log('error');
                return;
            }
        });
    }
}
return res.redirect('back');}

【讨论】：

【解决方案2】：

我做过这样的你可以参考一下。

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

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

  <div class="box">

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


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

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

App.js 代码

//jshint esversion:6

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",  {
   useNewUrlParser: true,
   useUnifiedTopology: true
 });

 const itemsSchema = {
   name: String
 };

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

 const item1 = new Item ({
   name: "Welcome to your TodoList!"
 });

 const item2 = new Item ({
   name: "Hit the + button to add a new item."
 });

 const item3 = new Item ({
   name: "<-- Hit this to delete an item."
 });

const defaultItems = [item1, item2, item3];


const today = new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'long', day: '2-digit'}).format(new Date());


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

  Item.find( {}, function(err, foundItems) {

    if(foundItems.length === 0) {
      Item.insertMany(defaultItems, function(err){
        if(err){
          console.log(err);
        } else {
          console.log("Successfully added all the documents");
        }
      });
      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("/delete", function(req, res) {
  const checkedItemId = req.body.checkbox;
  Item.findByIdAndRemove(checkedItemId , function(err) {
    if (!err) {
      console.log("Successfully deletd the Id");
    }
    res.redirect("/");
  });
});



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

【讨论】：

【解决方案3】：

使用这个：Mongoose data delete from checkbox using express js

app.post("/delete", function (req, res) {
      const checkedItemId = req.body.checkbox
      noteModel.findByIdAndRemove(checkedItemId , function (err) {
        if (!err) {
          console.log("succefully deleted")
          res.redirect("/")
        }
      })
})

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。