如何避免JS待办应用中删除X图标被添加删除线？

问题核心是text-decoration: line-through会被子元素继承，导致给<li>加删除线时，里面的图标也被划掉。最简单的解决办法是把任务文本单独封装在一个<span>里，只对这个文本容器应用删除线样式。

修改步骤： #

1. 拆分任务元素结构
   创建任务时，将输入文本放到<span>标签中，再把该span和图标一同加入<li>，让文本与图标成为同级元素，实现样式分离。

2. 调整CSS样式规则
   将原本作用于.checked类的删除线样式，改为仅作用于.checked下的span元素，确保图标不受影响。

3. 优化点击事件逻辑
   保留点击li切换完成状态的功能，同时支持点击任务文本区域触发状态切换，提升交互体验。

修改后的完整代码： #

JavaScript代码：

// Constants
const input = document.getElementById("input");
const taskContainer = document.querySelector(".task-container");

// Function used to create new task
function addTask() {
    // If the user don't write anything, show an error
    if (input.value === '') {
        alert("You must write something!");
    } else {
        let li = document.createElement("li");          
        li.classList.add("task");                       
        // 创建span包裹任务文本
        let taskText = document.createElement("span");
        taskText.textContent = input.value;
        li.appendChild(taskText);
        // 添加图标
        let icon = document.createElement("i");         
        icon.classList.add("icon", "fa-solid", "fa-x"); 
        li.appendChild(icon);                           
        taskContainer.appendChild(li);
    }
    input.value = ""; // Empty the input
}

//Event listener for list
taskContainer.addEventListener("click", function (e) {
    // 点击li或内部span，都切换checked类
    if (e.target.tagName === "LI" || e.target.tagName === "SPAN") { 
        const li = e.target.tagName === "LI" ? e.target : e.target.parentElement;
        li.classList.toggle("checked");
    }
}, false);

// Event listener for icon
taskContainer.addEventListener("click", function (e) {
    if (e.target.tagName === "I") { 
        e.target.parentElement.remove();
    }
}, false);

CSS代码（仅修改.checked相关规则）：

.task {
    padding: 0 5px 0 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28px;
    background: rgb(248, 248, 248);
    border-radius: 5px;
    list-style: none;
}

.icon {
    font-size: 25px;
    color: red;
    text-decoration: none;
}

/* 仅给checked类下的span添加删除线 */
.checked span {
    color: #555;
    text-decoration: line-through;
}

改动说明： #

• 文本与图标分离后，样式可精准控制，删除线仅作用于任务文本，图标不受影响。
• 扩展点击触发范围，用户点击任务文本区域也能切换完成状态，交互更自然。
• 图标仍保留在li内部，删除逻辑无需改动，点击图标可正常删除对应任务项。

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