JavaScript待办列表开发：删除全部按钮的for循环无法终止且无法新增任务

问题根源分析 #

1. 循环逻辑错误：你用的for循环里，判断终止的list.length === 0完全无效——list是单个DOM元素，不存在length属性，所以break永远不会触发；同时循环条件依赖list.firstChild，但你实际把任务项加到了ul而非list，导致list的子元素一直存在，循环无限执行。
2. 父元素引用错误：代码中任务<li>是添加到ul的，但删除全部时操作的是list（.li-container），两者不是同一个容器，根本删不掉任务项，反而引发循环死锁。
3. 按钮未正确返回：addDeleteBtn函数没有返回创建的删除按钮，导致li.appendChild(addDeleteBtn())实际添加的是undefined，破坏了DOM结构，进而导致后续无法添加新任务。

修正后的完整代码 #

const input = document.querySelector('input');
const addBtn = document.querySelector('.btn-add');
const ul = document.querySelector("ul");
const empty = document.querySelector('.empty');
const btnEliminarTodo = document.querySelector('.btn-eliminar-todo');

addBtn.addEventListener("click", (e) => {
  e.preventDefault();

  const text = input.value;

  if (text !== "") {
    const li = document.createElement('li');
    const p = document.createElement('p');
    p.textContent = text;

    li.appendChild(p);
    li.appendChild(addDeleteBtn());
    ul.appendChild(li);

    input.value = "";
    empty.style.display = "none";
  };
});

function addDeleteBtn() {
  const deleteBtn = document.createElement('button');

  deleteBtn.textContent = "X";
  deleteBtn.className = "btn-delete";

  deleteBtn.addEventListener("click", (e) => {
    const item = e.target.parentElement;
    ul.removeChild(item);
    const items = document.querySelectorAll('li');
    if (items.length === 0) {
      empty.style.display = "block";
    };
  });

  return deleteBtn;
}

btnEliminarTodo.addEventListener("click", (e) => {
  while (ul.firstChild) {
    ul.removeChild(ul.firstChild);
  }
  empty.style.display = "block";
});

关键修改点说明 #

• 修复按钮创建函数：给addDeleteBtn添加return deleteBtn;，确保删除按钮能正确挂载到任务项上。
• 替换删除全部的循环：用while (ul.firstChild)循环替代原错误的for循环，只要ul还有子元素就删除，逻辑清晰且不会出现死循环。
• 统一容器引用：删除全部时操作实际承载任务的ul，而非错误的list元素，确保任务项能被正确删除。
• 恢复空状态提示：删除全部后主动显示empty元素，保持界面状态一致。

内容的提问来源于stack exchange，提问作者Adrián Cúneo