如何在Node.js+Express+EJS项目中实现点击删除待办列表项

核心实现思路：使用任务在数组中的索引作为唯一标识，通过表单隐藏域传递给后端删除接口，后端移除对应元素后刷新列表即可。

第一步：修改app.js添加删除任务路由 #

在现有app.post('/', ...)新增任务路由下方，新增以下代码：

// 删除任务路由
app.post('/delete-task', (req, res) => {
  const taskIndex = parseInt(req.body.taskIndex);
  // 校验索引合法性避免数组越界
  if (taskIndex >= 0 && taskIndex < tasks.length) {
    tasks.splice(taskIndex, 1);
  }
  res.redirect('/');
});

第二步：修改index.ejs添加删除按钮 #

将原有列表渲染部分的代码替换为以下内容，循环时获取数组索引，每个任务旁添加删除表单：

<!-- TODO LIST -->
<ul>
    <% tasks.forEach((task, index) => { %>
    <li>
        <%= task %>
        <!-- 删除表单，inline样式保证和任务文本同行显示 -->
        <form action="/delete-task" method="post" style="display: inline; margin-left: 8px;">
            <input type="hidden" name="taskIndex" value="<%= index %>">
            <button type="submit">删除</button>
        </form>
    </li>
    <% }); %>
</ul>

修改完成后重启服务即可实现点击删除按钮移除对应任务的效果。如果后续你改用数据库存储任务，将索引替换为数据库生成的唯一任务ID即可，逻辑基本一致。

内容的提问来源于stack exchange，提问作者Chris Faux