如何使用JavaScript实现点击列表项添加删除线（制作清单）

嘿，这个需求超实用，刚好能把你的普通列表改成一个像样的待办清单！我先帮你修正原代码里的小语法问题，再加上点击切换删除线的功能。

首先，原代码里有个小语法错误：声明listNode的时候前面多了个逗号，这会导致代码报错，得先去掉。接下来我们给每个新创建的列表项绑定点击事件，用来切换删除线样式。

完整实现代码（包含HTML、CSS和JS） #

先搭好HTML结构，确保输入框、按钮和列表容器都存在：

<input type="text" id="myInput" placeholder="输入待办内容...">
<button onclick="newElement()">添加到清单</button>
<ul id="myUL"></ul>

然后是修改后的JavaScript代码，我还加了空输入判断，避免创建空列表项：

function newElement() {
  // 获取输入值并去除首尾空格
  var myInput = document.getElementById("myInput").value.trim();
  
  // 防止添加空内容
  if (!myInput) {
    alert("请输入待办内容哦！");
    return;
  }

  var listNode = document.getElementById('myUL');
  var liNode = document.createElement('LI');
  var txtNode = document.createTextNode(myInput);
  
  liNode.appendChild(txtNode);
  listNode.appendChild(liNode);
  
  // 清空输入框，方便继续输入
  document.getElementById("myInput").value = "";
  
  // 给新列表项绑定点击事件，切换删除线样式
  liNode.addEventListener('click', function() {
    // 用CSS类管理样式，比直接改style更灵活易维护
    this.classList.toggle('strike-through');
  });
}

最后加一点CSS让样式更直观美观：

.strike-through {
  text-decoration: line-through;
  color: #666; /* 可选：已完成项变灰，区分未完成状态 */
  cursor: pointer; /* 鼠标移上去显示手型，提示可点击 */
}

li {
  margin: 8px 0;
  font-size: 16px;
  padding: 4px;
}

关键细节说明 #

1. 空输入拦截：避免用户误点按钮创建空列表项，提升使用体验。
2. CSS类切换：用classList.toggle()切换样式类，后续要修改已完成项的样式，直接改CSS就行，不用动JS代码，符合样式与逻辑分离的原则。
3. 独立点击事件：每个新创建的li元素都会单独绑定点击事件，确保点击每个项都能独立切换完成状态。

如果不想额外写CSS，也可以直接修改元素的style属性（不过还是推荐用CSS类的方式）：

// 替代class切换的写法
liNode.addEventListener('click', function() {
  this.style.textDecoration = this.style.textDecoration === 'line-through' ? 'none' : 'line-through';
});

这样你的清单功能就完整啦，点击添加的项就能标记为已完成，再点一次就能取消状态～

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