点击按钮时如何为对应列表<li>元素添加文本删除线效果

你写的代码逻辑存在以下几个错误，导致Done按钮效果无法生效：

• 页面初始加载时还没有任何动态生成的列表项和Done按钮，你在submit事件外部写的getElementById("b2")根本获取不到元素，事件绑定完全不生效
• 你给所有动态生成的li、按钮都设置了重复的固定id，id在HTML中必须全局唯一，就算元素生成后用id查找也只能找到第一个匹配的元素，无法定位到当前点击按钮对应的列表项
• 存在重复的DOM插入操作：同一个li被重复追加到列表3次，按钮也被重复追加到li中，会出现元素重复渲染的问题
• setAttribute是DOM方法，你写成了属性赋值的语法，这行代码本身就不会执行生效
• 如果直接给整个li加删除线样式，li内的按钮文字也会被加上删除线，交互体验不好

JS部分（替换你原来的script.js内容即可） #

window.onload = function() {
    document.getElementById("submit-btn").addEventListener("click", function() {
        const inputContent = document.getElementById("text-box").value.trim();
        if (!inputContent) return; // 空内容不生成列表项
        
        const li = document.createElement("li");
        // 单独用标签包裹待办文本，只给文本加删除线，不影响按钮
        const textSpan = document.createElement("span");
        textSpan.innerText = inputContent;
        li.appendChild(textSpan);

        // 删除按钮逻辑
        const delBtn = document.createElement("button");
        delBtn.innerText = "X";
        delBtn.addEventListener("click", () => li.remove());
        li.appendChild(delBtn);

        // Done按钮逻辑：创建按钮时直接绑定事件，精准操作当前列表项的文本
        const doneBtn = document.createElement("button");
        doneBtn.innerText = "Done";
        doneBtn.addEventListener("click", () => {
            textSpan.style.textDecoration = "line-through";
        });
        li.appendChild(doneBtn);

        // 仅需插入一次li到列表即可
        document.getElementById("unordered-list").appendChild(li);
        // 添加完成后清空输入框
        document.getElementById("text-box").value = "";
    });
}

HTML部分优化提示 #

你现有HTML不需要大改，只需要注意如果后续不写window.onload包裹逻辑的话，最好把script标签移到</body>闭合标签前面，避免加载JS时DOM还没渲染完成找不到元素。

• 动态生成的元素不需要靠id查找关联关系，在创建元素的作用域里直接持有对应元素的引用（比如这里的textSpan、li），就可以精准操作，不会找错元素
• 事件绑定直接在元素创建时完成，不需要等元素渲染到页面后再找元素绑定，不会出现元素不存在绑定失败的问题
• 所有DOM元素只需要插入一次到目标父节点即可，重复调用appendChild不会生成新元素，只会移动已有元素位置，造成多余渲染

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