JavaScript待办事项列表问题：点击删除图标无法移除列表项

你绑定点击事件的<i>元素被Font Awesome的JS库替换成了<svg>元素，原<i>节点被移除后，绑定在它上面的click事件监听器自然失效，所以点击删除图标时无任何响应，console.log也不会输出。

提供两种可行方案，推荐使用方案一（事件委托），适配动态元素和Font Awesome的SVG替换逻辑：

方案一：事件委托（推荐） #

将删除事件监听绑定到父容器.todos上，通过事件冒泡机制捕获点击，无需为每个新创建的删除图标单独绑定事件：

1. 删除addNewTodo()函数内的这段代码：

newTodoTrash.addEventListener("click", (e) => {
  console.log("clicked delete icon");
  // You can add more functionality here, like removing the todo item
  // newTodoLi.remove();
});

2. 在全局作用域添加以下代码：

todoUlElem.addEventListener('click', (e) => {
  // 找到点击目标中最接近的.delete元素
  const deleteBtn = e.target.closest('.delete');
  if (deleteBtn) {
    console.log('clicked delete icon');
    // 找到对应的<li>并删除
    deleteBtn.closest('.list-group-item').remove();
  }
});

说明：closest()方法会向上遍历DOM树，找到匹配选择器的最近父元素，即使点击的是Font Awesome生成的SVG内部元素，也能正确定位到.delete类的容器，确保事件触发。

方案二：移除Font Awesome JS依赖（仅用CSS） #

如果你不需要Font Awesome的JS功能（如动态图标、动画），可以删除HTML中的Font Awesome JS脚本标签，只保留CSS链接：

删除这段代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.min.js" integrity="sha512-LW9+kKj/cBGHqnI4ok24dUWNR/e8sUD8RLzak1mNw5Ja2JYCmTXJTF5VpgFSw+VoBfpMvPScCo2DnKTIUjrzYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

然后打开addNewTodo()函数中注释的删除代码：

newTodoLi.remove();

此时<i>元素不会被替换，原事件绑定可正常工作。

let inputElem   = document.querySelector("input");
let addTodoForm = document.querySelector(".add");
let todoUlElem  = document.querySelector(".todos");

function addNewTodo(newTodoValue) {
  // Create the new li element
  let newTodoLi = document.createElement("li");
  newTodoLi.className =
    "list-group-item d-flex justify-content-between align-items-center";

  // Create the span for the todo title
  let newTodoTitleSpan = document.createElement("span");
  newTodoTitleSpan.innerHTML = newTodoValue;

  // Create the trash icon element
  let newTodoTrash = document.createElement("i");
  newTodoTrash.className = "fa fa-trash delete";

  // Append the title span and trash icon to the new li element
  newTodoLi.append(newTodoTitleSpan, newTodoTrash);

  // Append the new li element to the ul element
  todoUlElem.append(newTodoLi);
}

// Prevent the default form submission
addTodoForm.addEventListener("submit", (e) => {
  e.preventDefault();
});

// Add a new todo item when Enter key is pressed
inputElem.addEventListener("keydown", (e) => {
  let newTodoValue = e.target.value.trim();
  if (e.keyCode === 13) {
    inputElem.value = "";
    if (newTodoValue) {
      addNewTodo(newTodoValue);
    }
  }
});

// 事件委托处理删除操作
todoUlElem.addEventListener('click', (e) => {
  const deleteBtn = e.target.closest('.delete');
  if (deleteBtn) {
    console.log('clicked delete icon');
    deleteBtn.closest('.list-group-item').remove();
  }
});

内容的提问来源于stack exchange，提问作者Fazal Mohammad Qadirzay