JavaScript中remove()仅能单次删除待办项问题求助

你使用了全局变量存储taskPanel和deletebtn，每次添加新任务时，这些变量会被新创建的元素覆盖。因此removeContent中的事件监听实际上只绑定到最后一个创建的删除按钮，点击其他按钮时，taskPanel指向的是最后生成的任务区块，自然只能删除最后一项。

将全局变量改为addPanel函数内的局部变量，确保每个任务区块和对应的删除按钮拥有独立的作用域，避免互相覆盖：

// task list section
const taskBtn = document.querySelector('.btn-blue');
const addTask = document.querySelector('.main-content');

//Event Listeners
taskBtn.addEventListener('click', addPanel);

function addPanel(event) {
  //Create ul section
  const taskPanel = document.createElement('ul');
  taskPanel.setAttribute('class', 'task-added');
  taskPanel.style.cssText = "display: flex; border: 2px solid #000; border-radius: 5px; margin-top: 2rem; align-items: center; justify-content: space-around; padding-block: 2rem;"
  addTask.appendChild(taskPanel);

  // Create paragraph
  const taskPara = document.createElement('li');
  taskPara.classList.add('para-1');
  const addInput = document.querySelector('input');
  taskPara.innerText = addInput.value;
  taskPanel.appendChild(taskPara);

  //Create Button
  const deletebtn = document.createElement('button');
  deletebtn.setAttribute('class', 'btn-icon');
  deletebtn.innerHTML = '<i class="fa-solid fa-trash"></i>';
  deletebtn.style.cssText = "color: red; font-size: 1.5em; border: none; outline: none; padding-inline: 2rem; cursor: pointer;";
  taskPanel.appendChild(deletebtn);

  // 绑定删除事件，直接关联当前任务区块
  deletebtn.addEventListener('click', () => {
    taskPanel.remove();
  });
}

修改说明 #

• 移除全局的taskPanel、taskPara、deletebtn，改为addPanel内的局部变量，每次添加任务时生成独立实例。
• 在创建删除按钮后直接绑定点击事件，此时taskPanel指向当前创建的任务区块，点击时只会删除对应的项。

如果任务数量较多，推荐使用事件委托：只在父容器绑定一次事件，通过事件冒泡机制处理所有删除按钮的点击，避免重复绑定事件的开销：

// task list section
const taskBtn = document.querySelector('.btn-blue');
const addTask = document.querySelector('.main-content');

//Event Listeners
taskBtn.addEventListener('click', addPanel);
// 父容器监听点击事件，处理所有删除操作
addTask.addEventListener('click', (e) => {
  // 判断点击的元素是否为删除按钮（含图标）
  if (e.target.closest('.btn-icon')) {
    // 找到对应的任务区块并删除
    e.target.closest('.task-added').remove();
  }
});

function addPanel(event) {
  const taskPanel = document.createElement('ul');
  taskPanel.setAttribute('class', 'task-added');
  taskPanel.style.cssText = "display: flex; border: 2px solid #000; border-radius: 5px; margin-top: 2rem; align-items: center; justify-content: space-around; padding-block: 2rem;"
  addTask.appendChild(taskPanel);

  const taskPara = document.createElement('li');
  taskPara.classList.add('para-1');
  const addInput = document.querySelector('input');
  taskPara.innerText = addInput.value;
  taskPanel.appendChild(taskPara);

  const deletebtn = document.createElement('button');
  deletebtn.setAttribute('class', 'btn-icon');
  deletebtn.innerHTML = '<i class="fa-solid fa-trash"></i>';
  deletebtn.style.cssText = "color: red; font-size: 1.5em; border: none; outline: none; padding-inline: 2rem; cursor: pointer;";
  taskPanel.appendChild(deletebtn);
}

优势 #

• 只需绑定一次事件，后续新增的任务删除按钮自动生效。
• 避免了变量作用域的问题，逻辑更简洁。

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