如何在删除所有待办事项后显示空状态提示Div？

问题根源 #

1. 删除操作逻辑错误：当前删除任意待办后直接调用showNoToDo()，未检查是否还有剩余待办，导致仍有待办时也会显示空状态提示。
2. 数据存储错误：data被定义为数组，但用data["text"] = input.value的方式赋值，每次添加新待办都会覆盖之前的数据，无法正确追踪待办数量。
3. 编辑操作未处理空状态：编辑待办删除原项后，未检查是否需要恢复空状态提示。

修复方案 #

1. 新增通用状态切换函数 #

创建一个函数，根据DOM中待办项的实际数量自动控制空状态提示的显示/隐藏：

function toggleNoToDo() {
  if (posts.children.length === 0) {
    noToDo.classList.remove('hidden');
  } else {
    noToDo.classList.add('hidden');
  }
}

2. 修复数据存储逻辑 #

将acceptData函数修改为正确存储每个待办项到数组中：

let acceptData = () => {
  data.push({ text: input.value });
  console.log(data);
  createPost(data[data.length - 1]);
  toggleNoToDo();
};

3. 修改createPost函数 #

接收传入的待办项，避免依赖全局data的错误引用：

let createPost = (item) => {
  posts.innerHTML += `
  <div>
    <p>${item.text}</p>
    <span class="options">
      <i onClick="editPost(this)" class='bx bx-edit-alt'></i>
      <i onClick="deletePost(this)" class='bx bx-trash' ></i>
    </span>
  </div>
  `;
  input.value = "";
};

4. 更新删除和编辑函数 #

删除、编辑操作后调用通用状态切换函数：

let deletePost = (e) => {
  e.parentElement.parentElement.remove();
  toggleNoToDo();
};

let editPost = (e) => {
  input.value = e.parentElement.previousElementSibling.innerHTML;
  e.parentElement.parentElement.remove();
  toggleNoToDo();
};

5. 初始化状态检查 #

页面加载完成后调用一次状态切换函数，确保初始状态正确：

document.addEventListener('DOMContentLoaded', () => {
  toggleNoToDo();
});

6. 移除冗余函数 #

删除原有的hideNoToDo和showNoToDo函数，通用函数已覆盖其功能。

最终效果 #

• 添加第一个待办时，空状态提示自动隐藏
• 删除所有待办后，空状态提示自动恢复
• 编辑待办删除原项后，若没有剩余待办，提示会自动显示

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