---
title: "4.3.2 功能二：删除任务"
order: 3
---


![04-practice-0-to-1_4.3-core-features_4.3.2-delete-task.png](/images/Basic/04-practice-0-to-1_4.3-core-features_4.3.2-delete-task.png)
# 4.3.2 功能二：删除任务

> **本步目标**：点击任务旁边的"删除"按钮，让该任务从列表中消失

买错了东西想划掉？任务完成后想清理？删除功能必不可少。

## 🎯 我们要实现什么

用户的操作流程：

1. 看到任务列表中有多个任务
2. 点击某个任务旁边的"删除"按钮
3. 该任务从列表中消失
4. 其他任务不受影响

## 📝 完整 Prompt

由于我们已经有了"添加任务"的代码，现在是**在现有基础上追加功能**。复制下面的 Prompt：

```
【当前状态】
添加任务功能已经可以正常使用了。
现在请在此基础上，添加删除功能。

【需要实现】
当用户点击某个任务旁边的"删除"按钮时：
1. 只删除这一个任务
2. 列表中的其他任务保持不变
3. 删除后不需要确认提示，直接删除即可

【技术要求】
- 在现有代码基础上添加，不要重写整个文件
- 保持代码风格一致
- 关键逻辑添加中文注释
```

::: tip 💡 增量式 Prompt
注意这个 Prompt 的开头是"添加任务功能已经可以正常使用了"。这样做是告诉 AI **当前的上下文**，避免它重写已有的代码。
:::

## ✅ 预期结果

**测试步骤**：
1. 先添加三个任务：任务A、任务B、任务C
2. 点击"任务B"旁边的删除按钮
3. 检查结果：

| 检查项 | 预期效果 |
|-------|---------|
| 任务B | 已经消失 |
| 任务A | 还在，位置不变 |
| 任务C | 还在，位置不变 |

**再测试**：
1. 继续点击"任务A"的删除按钮
2. 预期：任务A 消失，只剩任务C

## 🔍 检查点

- [ ] 点击删除按钮，对应任务消失
- [ ] 删除一个任务不影响其他任务
- [ ] 可以连续删除多个任务
- [ ] 删除全部任务后，列表为空（正常显示）

## ⚠️ 常见问题排查

### 问题 1：点击删除后，所有任务都消失了

**可能原因**：删除逻辑错误，清空了整个列表而不是单个任务。

**修复 Prompt**：
```
删除功能有问题：我点击一个任务的删除按钮后，所有任务都消失了。
应该只删除我点击的那一个任务。
请检查删除逻辑，确保只移除被点击的那个任务元素。
```

### 问题 2：点击删除按钮没反应

**修复 Prompt**：
```
删除按钮点击没有反应。
我的任务是通过 JavaScript 动态添加的（不是写死在 HTML 里的）。
请确保对动态添加的元素也能正确绑定删除事件。
```

### 问题 3：删错了任务（点A删了B）

**修复 Prompt**：
```
删除功能有问题：我点击任务A的删除按钮，结果删掉的是任务B。
请检查代码，确保删除的是按钮所在的那个任务，而不是其他任务。
```

## 💡 技术小贴士：动态元素的事件绑定

你可能会遇到一个有趣的问题：**为什么页面加载时就存在的按钮能点，但后来添加的任务的按钮点不了？**

这就像一个比喻：

> 你在公司门口贴了一张通知"有事找前台"。  
> 后来新来的员工没看到这张通知，所以不知道有事该找谁。

代码里也是这样：如果你在页面加载时就给"删除按钮"绑定了事件，那只有**当时存在的按钮**会响应。后来添加的新任务，它的删除按钮"没见过"那个通知。

**解决方案**叫做"事件委托"——不是给每个按钮单独绑定事件，而是告诉它们的"父容器"：

> "如果有人点击了你内部的删除按钮，就执行删除操作"

这样，无论是已有的还是后来添加的任务，点击删除按钮都能正常工作。

AI 通常会自动处理这个问题，但如果遇到"新添加的任务删除不了"的情况，把上面的问题 2 的 Prompt 发给 AI 就行。

## 🎯 完成确认

如果你已经：
- ✅ 能删除指定的任务
- ✅ 删除不影响其他任务
- ✅ 动态添加的任务也能删除

删除功能完成。

接下来是最后一个核心功能：标记任务完成。

→ [4.3.3 功能三：标记完成](./4.3.3-complete-task.md)