如何从按钮的 Onclick 中删除 EJS 中的数组项？
[英]How to delete an array item in EJS from an Onclick of button?
问题描述
I am creating a to-do list and need help with adding a button in EJS that can delete an object from an array itemArr .
我正在创建一个待办事项列表，需要帮助在 EJS 中添加一个可以从数组itemArr中删除 object 的按钮。 I am displaying my <li> items via a for loop, which are objects in the array.我通过 for 循环显示我的<li>项目，它们是数组中的对象。 Each object has a name, start time, end time and an id.每个 object 都有一个名称、开始时间、结束时间和一个 ID。
itemArr.push({name:newItem, st:starttime, et:endtime, id:id});
Is there a way to create an onclick button that can delete an object from the array and hence remove it from the "To do" listing?有没有办法创建一个 onclick 按钮，该按钮可以从阵列中删除 object 并因此将其从“待办事项”列表中删除？ I can easily remove it in html, but when i add a new item, the array is refreshed and the listing will reappear, so i must remove it from the array.我可以在 html 中轻松删除它，但是当我添加一个新项目时，数组会刷新并且列表会重新出现，所以我必须将它从数组中删除。
Currently, this is my EJS Code , where the List is generated from a for loop, and res.render shows where the itemArr is binded to ITEMARRAY.目前，这是我的EJS 代码，其中 List 是从 for 循环生成的，res.render 显示 itemArr 绑定到 ITEMARRAY 的位置。
<body>
<h2 style="text-decoration: underline;"> To do:</h2>
<ol type="1">
<% for (var i=0;i<ITEMARRAY.length;i++){ %>
<li> <%= ITEMARRAY[i].name %> | <%= ITEMARRAY[i].st %> - <%= ITEMARRAY[i].et %> <input type="checkbox"> <button onclick="myFunction(i)" id="remove">X</button> </li>
<% } %>
</ol>
<script>
function myFunction() {
var x = document.getElementById("remove").parentNode.remove();
}
</script>
Here is the app.js :这是 app.js ：
app.get("/", function (req, res) {
res.render("list", {ITEMARRAY: itemArr}); //pass an object into list.ejs with keyval pair
});
app.post("/", function(req,res){
var newItem = req.body.newItem;
var starttime = req.body.startTime;
var endtime = req.body.endTime;
var id = 0;
//checking validity of range
var start = parseInt(starttime.split(":"));
var end = parseInt(endtime.split(":"));
var difference = (end - start) / (86400000 * 7);
if (difference < 0) {
// throw new Error("The start time must come before the end time.");
res.render("fail");
}
else
itemArr.push({name:newItem, st:starttime, et:endtime, id:id}); //if all ok, then push to arr
sortList(itemArr);
res.redirect("/");
})
2 个解决方案
解决方案1
0 2021-05-19 18:35:45
TL; TL; DR;博士； EJS is a server-side rendering solution so you cannot do that. EJS 是一种服务器端渲染解决方案，因此您不能这样做。
Because EJS is an SSR solution all the rendering happens on the server and then the client receives an HTML page.因为 EJS 是一个 SSR 解决方案，所有的渲染都发生在服务器上，然后客户端收到一个 HTML 页面。 From now the page lives in the Browser, and to change it you need to use some browser JS code to do that.从现在开始，页面位于浏览器中，要更改它，您需要使用一些浏览器 JS 代码来执行此操作。
解决方案2
0 已采纳 2021-06-08 05:23:00
the answer is to use mongodb, then make a post request via the button.答案是使用 mongodb，然后通过按钮发出 post 请求。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.