如何用remove()函数仅删除列表最后一个元素？修复全列表删除问题

问题根源 #

你的代码有两个关键问题导致了这个bug：

• Remove按钮的点击事件被嵌套在Add按钮的点击逻辑里，每次添加任务都会给Remove按钮多绑一次点击事件，点一次Remove会触发多次删除操作。
• 用taskList.remove()是直接删掉整个<ul>列表容器，而不是最后一个任务项。

修复后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>To-Do List</title>
  </head>
  <body>
    <h1>To-Do List</h1>
    <input type="text" class="task" placeholder="Enter a task">
    <button class="Add">Add Task</button>
    <button class="removeTask">Remove</button>
    <ul class="taskList"></ul>
  </body>
  <script>
const taskList = document.querySelector(".taskList");
const RemoveEl = document.querySelector(".removeTask");
const addTask = document.querySelector(".Add");

// 添加任务逻辑
addTask.addEventListener("click", (e)=>{ 
  const taskInput = document.querySelector(".task");
  const newTask = document.createElement("li");
  let task = taskInput.value;

  if (task.trim() !== "") {
    newTask.innerText = task;
    taskList.appendChild(newTask);
    taskInput.value = "";
  }
});

// 删除最后一个任务的逻辑，单独绑定一次即可
RemoveEl.addEventListener("click",()=>{
  // 先判断列表有没有任务，再删除最后一个子元素
  if (taskList.lastElementChild) {
    taskList.lastElementChild.remove();
  }
});
  </script>
</html>

关键修改点 #

1. 移出事件绑定：把Remove按钮的点击监听从Add函数里拿出来，确保页面加载后只绑定一次，不会重复触发。
2. 精准删除目标：用taskList.lastElementChild获取列表的最后一个<li>任务项，再调用remove()删除它，而不是删掉整个列表容器。
3. 空列表判断：添加了if (taskList.lastElementChild)的判断，避免列表为空时点击Remove按钮报错。

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