待办事项列表项目：关闭按钮不显示问题求助

问题分析 #

你的代码存在三个关键错误，直接导致关闭按钮无法正常显示：

• 初始任务选择错误：document.querySelectorAll(".li") 是选择带.li类的元素，但你的<li>并未添加该类，且页面加载时<ul>是空的，这段代码完全不会执行。
• 关闭按钮创建语法错误：document.innerText("\u00D7") 写法错误，innerText是元素属性而非方法，无法通过这种方式创建关闭符号。
• 新任务未绑定关闭按钮：仅在页面加载时尝试创建按钮，但新添加的<li>没有执行创建逻辑，导致新任务也没有关闭按钮。

修复后的完整JS代码 #

// 封装关闭按钮创建逻辑，复用性更强
function createCloseButton(liElement) {
  const span = document.createElement("span");
  span.className = "close";
  span.innerText = "\u00D7"; // 直接给span设置关闭符号
  liElement.appendChild(span);

  // 给关闭按钮添加删除功能
  span.onclick = () => liElement.remove();
}

// 页面元素加载完成后，给初始li（若有）添加关闭按钮
document.addEventListener('DOMContentLoaded', () => {
  const tasks = document.querySelectorAll("li"); // 选择所有li元素，而非.li类
  tasks.forEach(task => createCloseButton(task));
});

// 获取输入框元素
const input = document.querySelector('#inputText')

// 添加新任务的核心函数
function newTask() {
  const inputText = input.value.trim();
  if (!inputText) return; // 过滤空白内容，避免无效任务

  const task = document.createElement('li');
  task.innerText = inputText;
  input.value = '';

  const list = document.querySelector('#list');
  list.appendChild(task);

  // 给新任务添加关闭按钮
  createCloseButton(task);

  // 补充任务完成状态切换功能（匹配你用的w3schools样式）
  task.onclick = () => task.classList.toggle('checked');
}

额外优化说明 #

1. 新增DOMContentLoaded事件监听，确保页面元素加载完成后再执行初始逻辑，避免找不到元素的问题。
2. 将关闭按钮创建逻辑封装为函数，初始任务和新任务均可复用，减少重复代码。
3. 给关闭按钮补充了删除功能，点击叉号直接移除对应任务。
4. 添加空白输入判断，避免创建无内容的空任务。
5. 补充任务点击切换完成状态的功能，和你引用的w3schools CSS样式完全匹配。

你的CSS和HTML代码无需修改，直接使用即可。

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