如果复选框被选中，则删除项目待办事项列表
[英]Remove item if checkbox is checked to-do list
问题描述
我正在构建自己的待办事项列表 web 应用程序。 我已经设置了一切，但还剩下一件事。 我想如果一个复选框被选中，将其从数组中删除。 我怎样才能使用 DOM 或其他任何东西来做到这一点？ 我在 stackoverflow 上找到了一些解决方案，但无法实现如何将它与我自己的代码一起使用。 请帮助我 :)在此处输入图片描述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") -%>
应用程序.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");
})
3 个解决方案
解决方案1
0 2021-01-22 16:20:38
我已经使用 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>
Controller 删除项目：-
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
0 2021-04-27 17:37:55
我是这样做的，你可以参考一下。
<%- 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
0 2021-09-06 18:19:02
使用这个：Mongoose 使用 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("/")
}
})
})
如何删除待办事项列表中的列表项
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.