jQuery待办事项列表开发：移除所有列表项时隐藏删除选中项按钮

Hey there! Let's figure out why your "Delete Selected Items" button isn't hiding when all to-dos are gone, and fix it step by step.

问题分析 #

From what you described, the button shows up when you mark items as completed (with strikethrough), but it stays visible even after all items are removed. The root issue is likely that your current condition checks don't account for the scenario where there are no remaining list items at all, or you're not triggering the check at the right time.

解决方案：通用状态检查函数 #

The best approach is to create a reusable function that checks the state of your to-do list and toggles the button's visibility accordingly. You can call this function every time the list changes (after adding an item, marking it as completed, or deleting items).

Here's how to implement it:

1. 先设置按钮初始状态（默认隐藏）

在CSS里添加以下代码，确保没有待办项时按钮不会显示：

#delete-selected {
  display: none;
}

2. 编写状态检查函数

这个函数会检查两个关键状态：是否有已完成的待办项，以及是否还有剩余的待办项：

function toggleDeleteButton() {
  // 获取所有已完成的待办项（假设你用.completed类标记删除线状态）
  const completedItems = $('li.completed');
  // 获取所有现存的待办项
  const totalItems = $('li');

  // 如果没有任何待办项，或者没有已完成的项，就隐藏按钮
  if (totalItems.length === 0 || completedItems.length === 0) {
    $('#delete-selected').hide();
  } else {
    $('#delete-selected').show();
  }
}

3. 在所有关键操作后调用该函数

确保每次列表发生变化时都运行这个检查：

• 添加新待办项后：

// 示例添加待办项的逻辑
$('form').submit(function(e) {
  e.preventDefault();
  const todoText = $('input').val();
  $('ol').append(`<li>${todoText}</li>`);
  $('input').val('');
  
  // 添加后检查按钮状态
  toggleDeleteButton();
});

• 点击待办项切换完成状态时：

$('ol').on('click', 'li', function() {
  $(this).toggleClass('completed');
  
  // 切换状态后检查按钮状态
  toggleDeleteButton();
});

• 删除选中项后：

$('#delete-selected').click(function() {
  $('li.completed').remove();
  
  // 删除后立即检查按钮状态
  toggleDeleteButton();
});

为什么这个方案有效 #

把按钮显示逻辑集中到一个函数里，确保列表的每一次变化都会触发状态检查。这就覆盖了“所有项都被移除”的边缘情况——当totalItems.length === 0为真时，按钮会自动隐藏。

如果你之前尝试过条件判断，可能只检查了已完成项的数量，没考虑所有项被清空的情况；或者忘记在删除操作后触发检查。这个方案刚好补上了这两个漏洞。

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