思路:利用事件冒泡,给ul添加点击事件,当我们点击li时,会以冒泡的
形式传递上去,触发ul的绑定事件。
获取所要删除的任务对应id值,分别通过ajax给服务器和客户端,服务器
删除数据库对应任务,客户端删除显示列表对应任务
//当用户点击删除按钮时,触发ul标签身上的点击事件
taskBox.on('click', '.destroy', function () {
//要删除的任务id
var id = $(this).attr('data-id');
//发送给服务端ajax请求,这里吧id给服务器,服务器删除对应数据库下的任务
$.ajax({
url: '/todo/deleteTask',
type: 'get',
data: {
_id: id
},
success: function (response) {
//从任务数组中找到已经删除的任务索引
//findIndex会对当前数组进行遍历,item就是遍历项
var index = taskAry.findIndex(item => item._id == id);
//将该索引对应的任务删除,这里是将用户端显示的删除,
//splice第一个是从第几格栅,第二个参数是删几个
taskAry.splice(index, 1);
//调用render方法进行显示
render();
}
})
});
服务器端对应代码
// 删除任务
todoRouter.get('/deleteTask', async (req, res) => {
// 要删除的任务id
const { _id } = req.query;
// 验证规则
const schema = {
_id: Joi.string().required().regex(/^[0-9a-fA-F]{24}$/)
}
// 验证客户端传递过来的请求参数
const { error } = Joi.validate(req.query, schema);
// 验证失败
if (error) {
// 将错误信息响应给客户端
return res.status(400).send({message: error.details[0].message})
}
// 删除任务
const task = await Task.findOneAndDelete({_id: _id});
// 响应
res.send(task);
});