我正在尝试创建一个待办事项列表。问题是当任务完成时，我试图删除复选框。我试图在主函数内部创建一个函数，里面有if/else语句。但是这行不通。
我想我需要先检查复选框是否被选中，然后开发一个脚本来删除li/checkbox元素。但我不知道如何实现它。下面是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Lista de tareas personal.</title>
<meta charset='utf-8'>
<style type="text/css">
body{
font-family: Helvetica, Arial;
}
li{
width: 50%;
list-style-type: none;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Lista de tareas personal.</h1>
<hr>
<br>
<button type="button" id="btn" onclick="addItem()">Añadir Item</button>
<input type="text" id="texto">
<!---<ul id="lista">
</ul>-->
<ul id="ul"></ul>
<script type="text/javascript">
//añadir item
function addItem(){
var ul = document.getElementById('ul'); // take ul/cogemos ul
var li = document.createElement('li');// take li/cogemos li
var checkbox = document.createElement('input'); // create checkbox/creamos los checkbox
checkbox.type = "checkbox";
checkbox.value = 1;
checkbox.name = "todo[]";
li.appendChild(checkbox); //adding checkboxes to li/añadimos los checkbox a los li
var text = document.getElementById('texto');// take the input text/cogemos el input de texto
li.appendChild(document.createTextNode(text.value)); //adding son nodes/ añadimos un hijo al li, que se crea x valor del input
ul.appendChild(li); // añadimos el li al ul
// My code which tries to solve the problem
if (checkbox.checked) {
function deleteItem(check) {
var childs = ul.childNodes;
ul.removeChild(childs);
/* or li.removeChild(checkbox);
ul.removeChild(li);*/
}
deleteItem();
}
}
var button = document.getElementById('btn');
button.onclick = addItem
</script>
</body>
</html>
你可以只添加一个EventListener到你的复选框和钩子到change事件。
function addItem() {
var ul = document.getElementById('ul');
var li = document.createElement('li');
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.value = 1;
checkbox.name = "todo[]";
li.appendChild(checkbox);
var text = document.getElementById('texto');
li.appendChild(document.createTextNode(text.value));
ul.appendChild(li);
checkbox.addEventListener("change", function() {
if(this.checked) {
ul.removeChild(li);
}
});
}
另外:
function deleteItem() {
if(this.checked) {
this.parentNode.parentNode.removeChild(this.parentNode);
}
}
function addItem() {
...
checkbox.addEventListener("change", deleteItem);
}
修改脚本。试试这个。
function addItem() {
var ul = document.getElementById('ul'); // take ul/cogemos ul
var li = document.createElement('li'); // take li/cogemos li
var checkbox = document.createElement('input'); // create checkbox/creamos los checkbox
checkbox.type = "checkbox";
checkbox.value = 1;
checkbox.name = "todo[]";
li.appendChild(checkbox); //adding checkboxes to li/añadimos los checkbox a los li
var text = document.getElementById('texto'); // take the input text/cogemos el input de texto
li.appendChild(document.createTextNode(text.value)); //adding son nodes/ añadimos un hijo al li, que se crea x valor del input
ul.appendChild(li); // añadimos el li al ul
// My code which tries to solve the problem
delCheckBox();
}
function delCheckBox() {
var elem = document.getElementById("ul").getElementsByTagName('input');
for (var i = 0; i < elem.length; i++) {
if (elem[i].type == 'checkbox' && elem[i].checked) {
elem[i].parentNode.removeChild(elem[i]);
}
}
}
var button = document.getElementById('btn');
button.onclick = addItem