在开发任务管理、待办清单这类前端功能时，我们经常会遇到一个常见需求：当用户删除最后一个任务时，需要把页面上的提示容器彻底隐藏甚至从DOM中移除，避免残留无用的提示元素影响页面展示。要实现这个效果，核心是先准确判断当前删除的是不是最后一个任务，再根据判断结果执行对应的容器操作。
核心实现逻辑
整个流程可以分为三个步骤：首先监听任务删除的事件，获取当前任务列表的剩余数量；然后判断剩余数量是否为0，也就是确认删除的是最后一个任务；最后根据判断结果处理提示容器，既可以选择隐藏容器，也可以选择直接从DOM中移除容器。
1. 判断最后一个任务被删除
我们可以通过获取任务列表容器的子元素数量来判断，假设任务列表的每个任务都有task-item类名，任务列表容器的id是task-list，那么判断逻辑如下：
// 获取任务列表容器
const taskList = document.getElementById('task-list');
// 获取当前剩余的任务数量
const remainingTasks = taskList.querySelectorAll('.task-item').length;
// 判断是否是最后一个任务被删除，删除前数量为1，删除后为0
if (remainingTasks === 0) {
// 执行提示容器处理操作
}
2. 隐藏提示容器
如果只是需要暂时隐藏提示容器，后续可能还会复用，可以使用CSS的display属性或者visibility属性，这里以display: none为例，假设提示容器的id是tip-container：
const tipContainer = document.getElementById('tip-container');
// 隐藏提示容器，元素不会占据页面空间
tipContainer.style.display = 'none';
3. 彻底移除提示容器
如果确定后续不会再使用这个提示容器，直接从DOM中移除是更彻底的做法，避免残留无用的DOM节点：
const tipContainer = document.getElementById('tip-container');
// 判断容器是否存在，避免报错
if (tipContainer && tipContainer.parentNode) {
// 从父节点中移除提示容器
tipContainer.parentNode.removeChild(tipContainer);
}
完整示例代码
下面是一个完整的待办任务列表示例，包含添加任务、删除任务，以及删除最后一个任务时移除提示容器的完整逻辑：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>任务列表示例</title>
<style>
.task-item {
padding: 8px;
margin: 4px 0;
border: 1px solid #eee;
display: flex;
justify-content: space-between;
}
.delete-btn {
color: red;
cursor: pointer;
}
#tip-container {
padding: 12px;
background: #f0f0f0;
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<input type="text" id="task-input" placeholder="输入任务内容">
<button id="add-btn">添加任务</button>
</div>
<div id="task-list"></div>
<div id="tip-container">当前没有任务，快去添加吧</div>
<script>
const taskInput = document.getElementById('task-input');
const addBtn = document.getElementById('add-btn');
const taskList = document.getElementById('task-list');
const tipContainer = document.getElementById('tip-container');
// 添加任务
addBtn.addEventListener('click', () => {
const taskContent = taskInput.value.trim();
if (!taskContent) return;
const taskItem = document.createElement('div');
taskItem.className = 'task-item';
taskItem.innerHTML = `<span>${taskContent}</span><span class="delete-btn">删除</span>`;
taskList.appendChild(taskItem);
taskInput.value = '';
// 添加任务后如果提示容器被隐藏，可重新显示（按需调整）
// tipContainer.style.display = 'block';
});
// 委托监听删除事件
taskList.addEventListener('click', (e) => {
if (e.target.className === 'delete-btn') {
const currentTask = e.target.parentElement;
// 删除前判断剩余任务数
const remainingTasks = taskList.querySelectorAll('.task-item').length;
// 移除当前任务
currentTask.remove();
// 如果删除后没有任务了，移除提示容器
if (remainingTasks === 1) {
if (tipContainer && tipContainer.parentNode) {
tipContainer.parentNode.removeChild(tipContainer);
}
}
}
});
</script>
</body>
</html>
注意事项
- 操作DOM前最好先判断元素是否存在，避免元素已经被移除后再次操作导致报错。
- 如果提示容器后续还需要复用，选择隐藏的方式更合适；如果确定不再使用，优先选择移除的方式，减少DOM节点数量。
- 使用事件委托监听删除事件，比给每个任务单独绑定事件性能更好，尤其是任务数量较多的时候。