待办列表点击li重复生成删除图标问题求助

问题核心是每次点击li都无脑创建新的删除按钮，而且没做状态切换的判断。我们可以通过类名管理状态来解决这个问题，同时避免重复生成元素：

修改步骤： #

1. 新增CSS类管理已完成样式，替代直接操作元素style，更易维护
2. 在li的点击事件中，先判断当前状态再执行对应操作：
   • 未完成状态：添加完成样式，仅在无按钮时创建并添加删除按钮
   • 已完成状态：移除完成样式，删除已有的删除按钮
3. 修复删除按钮的HTML闭合错误

修改后的完整代码： #

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<body>
  <br> <br> <br>
  <div id='container'>
    <p>My list</p>
    <br>

    <div id="formdiv">
      <label for="item">add this.. </label><br>
      <input type="text" name="item" id="item">
      <button id="add-button"> add </button>

    </div>
    <div id="allItems">
      <ul id="list">

      </ul>

    </div>
    <div id="clear">
      <button id="clear-button"> Clear List </button><br> <br> <br>
    </div>

  </div>
</body>

CSS

body {
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background-color: antiquewhite;
}

#container {
  width: 80%;
  margin: auto;
  padding-top: 10px;
  background-color: rgb(200, 225, 225);
  color: rgb(52, 48, 48);
  border-radius: 10px;
}

p {
  font-size: 20px;
  text-align: center;
  padding: 30px, 0px, 5px, 0px;
}

#formdiv {
  text-align: center;
}

#item {
  size: 100px;
}

#clear {
  margin-top: 60px;
  text-align: center;
}

li {
  list-style-type: none;
  font-size: 3.2em;
  padding: 0.5em;
  margin: 1em;
  background-color: lightyellow;
  border-radius: 5px;
  border: 1px solid grey;
  cursor: pointer;
}

/* 新增已完成状态类 */
li.completed {
  text-decoration: line-through;
}

.trash-image {
  float: right;
  margin: -2px 3px 3px 3px;
  vertical-align: middle;
  height: 4px;
}

JavaScript

//select from DOM
let button = document.querySelector('#add-button');
let userInput = document.querySelector('#item');
let list = document.querySelector('#list');
let clear = document.querySelector('#clear-button');

//add event listener
button.addEventListener('click', addToList);
clear.addEventListener('click', clearAll);

//functions
function addToList() {
  // 空输入不处理
  if (!userInput.value.trim()) return;
  
  let newListItem = document.createElement('li');
  newListItem.textContent = userInput.value;
  list.appendChild(newListItem);
  userInput.value = "";

  newListItem.addEventListener('click', function() {
    // 判断是否已完成
    const isCompleted = this.classList.contains('completed');
    // 查找当前li下的删除按钮
    const existingTrashBtn = this.querySelector('.trash-image');

    if (isCompleted) {
      // 已完成：移除状态类，删除按钮
      this.classList.remove('completed');
      if (existingTrashBtn) {
        existingTrashBtn.remove();
      }
    } else {
      // 未完成：添加状态类，且仅在没有按钮时创建
      this.classList.add('completed');
      if (!existingTrashBtn) {
        let itemButton = document.createElement('a');
        itemButton.setAttribute('href', '#');
        itemButton.classList.add('trash-image');
        // 修复HTML闭合错误
        itemButton.innerHTML = '<i class="material-icons">delete</i></a>';
        itemButton.addEventListener("click", deleteOneItem);
        this.appendChild(itemButton);
      }
    }
  });
}

function deleteOneItem(e) {
  // 阻止点击删除按钮时触发li的点击事件
  e.stopPropagation();
  this.parentNode.remove();
}

function clearAll() {
  list.innerHTML = "";
}

额外优化点： #

• 增加空输入判断，避免添加空li
• 在删除按钮点击事件中加入e.stopPropagation()，防止触发li的状态切换
• 给li添加cursor: pointer，提升交互体验

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