新手开发待办应用：如何为动态创建的li元素添加删除图标

可以通过以下步骤给新创建的<li>元素添加删除功能（包含删除图标/按钮）：

实现思路 #

• 创建删除按钮（或图标容器）并嵌入每个新任务项
• 给删除按钮绑定点击事件，触发时移除对应任务项
• 优化交互：添加任务后自动清空输入框

修改后的完整代码 #

const inputArea = document.querySelector('#input');
const allTasks = document.querySelector('#list');

function collectInfo() {
  const taskText = inputArea.value.trim();
  if (taskText === '') {
    alert('请输入要添加的任务');
    return;
  }

  // 创建任务项容器
  const taskItem = document.createElement('li');
  
  // 创建任务文本节点
  const taskContent = document.createElement('span');
  taskContent.textContent = taskText;
  taskItem.appendChild(taskContent);

  // 创建删除按钮（用「×」作为简易删除图标）
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = '×';
  // 添加类名方便自定义样式
  deleteBtn.classList.add('delete-btn');
  
  // 绑定删除事件
  deleteBtn.addEventListener('click', function() {
    allTasks.removeChild(taskItem);
  });

  // 将删除按钮加入任务项
  taskItem.appendChild(deleteBtn);

  // 将任务项加入列表
  allTasks.appendChild(taskItem);

  // 清空输入框
  inputArea.value = '';
}

const addBtn = document.querySelector('#add');
addBtn.addEventListener('click', collectInfo);

补充优化方案 #

1. 替换为美观图标：如果想用更专业的图标（比如垃圾桶样式），可以使用字体图标库，示例如下：

// 假设已引入Font Awesome样式
const deleteBtn = document.createElement('button');
deleteBtn.innerHTML = '<i class="fa-solid fa-trash"></i>';
deleteBtn.classList.add('delete-btn');

2. 基础样式美化：给删除按钮加简单样式提升视觉效果：

.delete-btn {
  margin-left: 12px;
  background: #ff5252;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

内容的提问来源于stack exchange，提问作者hamx solo