[我正在尝试使用Javascript编写待办事项应用程序，现在我正在尝试找出如何通过复选框删除待办事项并撤消该操作。我已经尝试过通过按钮实现相同的目的，并且单击按钮时可以删除文本，但是我不知道如何撤消它。
function newToDo() {
if (document.getElementById("input_todo").value == "") {
confirm("Bitte füllen sie es aus.")
} else {
var newLi = document.createElement("LI");
newLi.id = "itemLi";
newLi.innerHTML = document.getElementById("input_todo").value;
var allTodos = document.getElementById("allTodos");
var checkBox = document.createElement("INPUT");
checkBox.id = "checkBox";
checkBox.type = "checkbox";
var buttonDel = document.createElement("BUTTON");
buttonDel.id = "buttonDel";
buttonDel.setAttribute('onclick', "delToDo()");
allTodos.appendChild(newLi);
newLi.appendChild(checkBox);
newLi.appendChild(buttonDel);
document.getElementById("input_todo").value = "";
if (checkBox.checked == "true") {
document.getElementById("itemLi").style.textDecoration = "line-through";
} else {
document.getElementById("itemLi").style.textDecoration = "none";
}
}
}
function delToDo() {
allTodos.removeChild(itemLi);
}#input_todo {
width: 500px;
height: 24px;
font-size: 16px;
}
#but_todo {
width: 100px;
height: 30px;
}
#itemDiv {
border: 1px solid black;
}
#buttonJa {
width: 50px;
height: 25px;
}
#buttonDel {
width: 50px;
height: 25px;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="todo.css" media="screen">
<title>To-Do</title>
</head>
<body>
<h1>To-Do Liste</h1>
<input id="input_todo" type="text">
<button id="but_todo" onclick="newToDo()">Create To-Do</button>
<ul id="allTodos">
</ul>
<script language="javascript" type="text/javascript" src="todo.js"></script>
</body>
</html>[如果要设置复选框样式，请使用<label>元素。当使用for属性连接到输入时，可以单击它以选中或取消选中输入。所有其他输入元素和标签组合也是如此。
并且在样式方面，只需诉诸CSS。输入的:checked伪选择器可以检查是否选中了输入，并相应地更改了样式。
如果要创建元素并将其附加到文档中，则不要使用id属性，而应使用类。 ID必须是唯一的，否则就没有用。
ul {
padding: 0;
list-style: none;
}
li {
margin: 15px 0;
}
input[type="checkbox"] {
display: none;
}
label {
display: block;
position: relative;
padding: 15px;
border-radius: 5px;
border: 1px solid #f0f0f0;
background-color: #f7f7f7;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);
cursor: pointer;
font-family: sans-serif;
color: #333333;
transition: 100ms ease-in-out;
transition-property: box-shadow, transform;
}
label:hover {
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.25);
transform: translate3d(0, -2px, 0);
}
label::after {
content: "";
display: block;
position: absolute;
height: 2px;
width: calc(100% + 10px);
left: -5px;
top: 50%;
transform: translate(0, -50%) scaleX(0);
transform-origin: left center;
background-color: red;
transition: transform 250ms ease-in-out;
}
input[type="checkbox"]:checked + label::after {
transform: translate(0, -50%);
}<form>
<ul>
<li>
<input id="task-1" type="checkbox" name="task" value="done">
<label for="task-1">Task that I have to do</label>
</li>
<li>
<input id="task-2" type="checkbox" name="task" value="done">
<label for="task-2">Another task that I have to do</label>
</li>
</ul>
</form>