待办列表开发：如何仅为父Div内的任务文本添加删除线？

你的问题根源是给整个任务项的父容器加了删除线样式，导致所有子元素（包括删除按钮）都继承了这个样式。要只让任务文本显示删除线，得把文本单独放在一个容器里，再针对性设置样式。

第一步：给任务文本加单独容器 #

在addTask函数里，别直接用createTextNode创建文本节点，换成用<span>包裹文本：

// 替换原来的 let textItem = document.createTextNode(taskVal);
let textItem = document.createElement('span');
textItem.textContent = taskVal;

这样任务文本就和复选框、删除按钮分开，能单独选中它了。

第二步：修改finishTask函数 #

现在不用操作父容器，直接找到刚才的span元素设置删除线：

function finishTask() {
  // 从父元素里找到包裹文本的span
  const taskText = this.parentNode.querySelector('span');
  if (this.checked) {
    taskText.style.textDecoration = "line-through";
  } else {
    taskText.style.textDecoration = "none";
  }
}

完整修改后的代码 #

JavaScript #

let taskList = document.getElementById('taskList');
let taskBox = document.getElementById('taskBox');
let taskCount = 0;

document.addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    addTask();
  }
});

function addTask() {
  let taskVal = taskBox.value;

  if (taskVal.length < 1) {
    window.alert('Task Box Empty');
  } else {
    let itemDiv = document.createElement('li');
    let itemCheck = document.createElement('input');
    // 用span包裹任务文本，方便单独控制样式
    let textItem = document.createElement('span');
    let itemDelete = document.createElement('button');

    itemDiv.classList.add('itemDiv');
    itemCheck.style.height = "50px";

    itemCheck.type = "checkbox";
    itemCheck.name = "finished";
    itemCheck.id = "checkbox";

    textItem.textContent = taskVal;
    itemDelete.innerText = "x"

    taskList.append(itemDiv);
    itemDiv.appendChild(itemCheck);
    itemDiv.appendChild(textItem);
    itemDiv.appendChild(itemDelete);
    taskCount++;

    itemCheck.onclick = finishTask.bind(itemCheck);
    itemDelete.onclick = deleteItem.bind(itemDiv);
    taskBox.value = "";
  }
}

function finishTask() {
  const taskText = this.parentNode.querySelector('span');
  if (this.checked) {
    taskText.style.textDecoration = "line-through";
  } else {
    taskText.style.textDecoration = "none";
  }
}

// 补充原代码缺失的几个函数，让功能完整
function deleteItem() {
  this.remove();
  taskCount--;
}

function clearAll() {
  taskList.innerHTML = "";
  taskCount = 0;
}

function clearFinished() {
  const finishedItems = taskList.querySelectorAll('input[type="checkbox"]:checked');
  finishedItems.forEach(item => {
    item.parentNode.remove();
    taskCount--;
  });
}

HTML（修正一个小错误） #

<h1>My To-Do List</h1>
<hr>
<div class="addTaskContainer">
  <!-- 原代码里input的type写了textarea，这里改成text，textarea是单独的标签 -->
  <input id="taskBox" type="text" placeholder="Add Task" autocomplete="off">
  <button class="add" onClick="addTask()">Add Task</button>
</div>

<ul class="taskList" id="taskList"></ul>

<button class="bottomBtn" onClick="clearAll()">Clear All</button>

<button class="bottomBtn" onClick="clearFinished()">Clear Finished</button>

额外小建议 #

如果后续要加更多样式（比如变灰），建议用CSS类来控制，比直接操作style更方便：

.completed {
  text-decoration: line-through;
  color: #999;
}

然后把finishTask函数改成这样：

function finishTask() {
  const taskText = this.parentNode.querySelector('span');
  // 用toggle方法自动添加/移除类，第二个参数控制是否添加
  taskText.classList.toggle('completed', this.checked);
}

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