如何从按钮的 Onclick 中删除 EJS 中的数组项？

Question

我正在创建一个待办事项列表，需要帮助在 EJS 中添加一个可以从数组中删除对象的按钮 itemArr。我通过 for 循环显示我的 <li> 项，它们是数组中的对象。每个对象都有名称、开始时间、结束时间和 ID。

itemArr.push({name:newItem, st:starttime, et:endtime, id:id});

有没有办法创建一个 onclick 按钮，它可以从数组中删除一个对象，从而将其从“待办事项”列表中删除？ 我可以轻松地将其删除html，但是当我添加一个新项目时，数组被刷新并且列表将重新出现，所以我必须从数组中删除它。

目前，这是我的 EJS 代码，其中列表是从 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>

这里是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("/");


})

Answer 1

TL;博士； EJS 是一种服务器端呈现解决方案，因此您不能这样做。

因为 EJS 是一个 SSR 解决方案，所以所有的渲染都发生在服务器上，然后客户端收到一个 HTML 页面。从现在开始，该页面位于浏览器中，要更改它，您需要使用一些浏览器 JS 代码来完成。

Answer 2

答案是使用 mongodb，然后通过按钮发出 post 请求。

如何从按钮的 Onclick 中删除 EJS 中的数组项？

How to delete an array item in EJS from an Onclick of button?

javascript

onclick

button

ejs

node.js