我按下复选框，但不会删除任务，也不会显示消息。
我试着在Firefox中调试它，它在我下面标记的行显示了这个错误："TypeError:checkbox是null">。
var list = document.querySelector('.list');
var items = list.children;
var emptyListMessage = document.querySelector('.no-tasks-message');
//functions
var toggleEmptyListMessage = function() {
if (items.length === 0) {
emptyListMessage.classList.remove('hidden');
}
else if (items.length > 0) {
emptyListMessage.classList.add('hidden');
}
}
var addCheckHandler = function(item) {
var checkbox = item.querySelector('.checkbox');
checkbox.addEventListener('change', function() { // This line throws the error.
item.remove();
toggleEmptyListMessage();
});
};
for (var i = 0; i < items.length; i++) {
addCheckHandler(items[i]);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title>To-do App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--To-Do List-->
<div class="todo-list">
<!--List-->
<ul class="list">
<!--Template-->
<template id="task-template">
<li class="list-item">
<div class="task-label">
<input class="checkbox" type="checkbox" id="task-n" name="task">
<label class="label" for="task-n"></label>
</div>
<div class="delete-btn">Delete</div>
</li>
</template>
<!--Template-->
<li class="list-item">
<div class="task-label">
<input class="checkbox" type="checkbox" id="task-1" name="task">
<label class="label" for="task-1">Eat</label>
</div>
<div class="delete-btn">Delete</div>
</li>
</ul>
<!--List-->
<p class="no-tasks-message hidden">
No tasks left
</p>
<input class="input" type="text" required>
<input class="add-btn" type="submit" value="Add">
</div>
<script src="js/script.js"></script>
</body>
</html>好的，现在使用HTML标记，查看以下内容：
var taskid=3, list = document.querySelector('.list');
var children = list.children;
var emptyListMessage = document.querySelector('.no-tasks-message');
var tmpl = document.querySelector('#task-template');
var inp = document.querySelector('.input');
list.onclick=ev=>{ // click handler associated with div.list
// will only do something, if the element is of class "checkbox":
if (ev.target.classList.contains("checkbox")){
ev.target.parentNode.parentNode.remove();
emptyListMessage.classList.toggle('hidden',children.length); // hide or show message
}
};
document.querySelector('.add-btn').onclick=ev=>
list.innerHTML+=tmpl.innerHTML.replace(/@1/g, inp.value).replace(/@2/g,++taskid).hidden {display: none}<div class="todo-list">
<!--List-->
<ul class="list">
<li class="list-item">
<div class="task-label">Task No. 1
<input class="checkbox" type="checkbox" id="task-1" name="task">
<label class="label" for="task-1">Eat</label>
</div>
<div class="delete-btn">Delete</div>
</li>
<li class="list-item">
<div class="task-label">Task No. 2
<input class="checkbox" type="checkbox" id="task-2" name="task">
<label class="label" for="task-2">Eat</label>
</div>
<div class="delete-btn">Delete</div>
</li>
<li class="list-item">
<div class="task-label">Task No. 3
<input class="checkbox" type="checkbox" id="task-3" name="task">
<label class="label" for="task-3">Eat</label>
</div>
<div class="delete-btn">Delete</div>
</li>
</ul>
<!--List-->
<!--Template-->
<template id="task-template">
<li class="list-item">
<div class="task-label">Task No. @2
<input class="checkbox" type="checkbox" id="task-@2" name="task">
<label class="label" for="task-n">@1</label>
</div>
<div class="delete-btn">Delete</div>
</li>
</template>
<!--Template-->
<p class="no-tasks-message hidden">
No tasks left
</p>
<input class="input" type="text" required>
<input class="add-btn" type="button" value="Add">
</div>几句解释性的话：我使用委托事件处理，它大大简化了事务：不必每次创建新项时都附加事件，而是为父容器附加一次。在我的脚本中，我处理类"的每个复选框；复选框"；，在CCD_ 4中被发现为"；"移除信号"；。