如何在任务列表项旁添加删除按钮？附现有代码优化需求

云原生阿岚

2026-8-15

解决方法

你的代码目前存在两个问题：一是所有任务项都使用了重复的id="list"（HTML规范要求id必须唯一）；二是删除按钮未绑定移除任务的逻辑。以下是修改后的完整代码：

原HTML无需改动，保持如下

<ul id="listid">
</ul>
<input id="text-area">
<button id="submit">submit</button>

修改后的JavaScript代码

document.getElementById('submit').addEventListener('click', withClick);

function withClick(e) {
  // 获取输入框内容并去除首尾空格，为空则不添加任务
  const inputVal = document.getElementById("text-area").value.trim();
  if (!inputVal) return;

  const li = document.createElement('li');
  li.className = 'collection-item';
  // 添加任务文本内容
  li.appendChild(document.createTextNode(inputVal));
  
  // 创建删除按钮
  const button = document.createElement('button');
  button.textContent = 'x';
  button.className = "button";
  // 给按钮绑定点击事件，点击时移除当前对应的任务项
  button.addEventListener('click', function() {
    li.remove();
  });
  
  li.appendChild(button);
  document.getElementById('listid').appendChild(li);
  
  // 清空输入框，方便下一次输入
  document.getElementById("text-area").value = '';
}