我已经决定学习Java脚本，在看了几个教程后，我正在通过挑战来训练.其中一个标志性的挑战是列出待办事项 list .我知道有一些有答案的例子，但我想知道为什么我的代码不能工作……
问题似乎是我只能删除最后一个任务，而不能删除其他任务.我认为，出于同样的原因，当我选中除最后一个框之外的任何其他框时，文本装饰都不会出现(中间的线条).
PS:如果你对我的解决方案有任何 comments ，请不要犹豫，我渴望了解.
先谢谢你
const newTaskInput = document.getElementById("newTask");
const tasks = document.querySelector(".tasks");
let tasksCheckboxes = tasks.querySelectorAll("input[type='checkbox']");
let taskCount = 0;
//To add the new task in the content section
newTaskInput.addEventListener("keypress", (e) => {
if (e.key == "Enter" && newTaskInput.value != "" && newTaskInput.value != undefined) {
tasks.innerHTML += `
<li id="${taskCount}-section">
<input type="checkbox" id="${taskCount}chk">
<label class="label-for-${taskCount}" for="${taskCount}chk">${newTaskInput.value}</label>
<input type="button" id="${taskCount}btn" value="x">
</li>`;
addListenerToCheckbox(taskCount);
addListenerToButton(taskCount);
newTaskInput.value = "";
++taskCount;
}
})
const addListenerToCheckbox = (aTaskCount) => {
const checkbox = document.getElementById(aTaskCount + "chk");
const checkLabel = document.querySelector(`.label-for-${aTaskCount}`);
checkbox.addEventListener("click", () => {
if (checkbox.checked) {
checkLabel.style.textDecoration = "line-through";
} else {
checkLabel.style.textDecoration = "none";
}
})
}
const addListenerToButton = (aTaskCount) => {
console.log(taskCount);
const taskBtn = document.getElementById(aTaskCount + "btn");
const task = document.getElementById(aTaskCount + "-section");
taskBtn.addEventListener("click", () => {
console.log("gg");
task.remove();
})
}<h1>To Do List:</h1>
<div class="box">
<input type="text" id="newTask">
<div class="content">
<ul class="tasks"></ul>
</div>
</div>