Question

我试图创建一个待办事项列表。问题是当我尝试在任务完成时删除复选框。我尝试在主函数内部创建一个函数，里面有一个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>

Answer 1

您只需将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);
}

Answer 2

修改了你的脚本。试试这个。

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

如何删除已创建的复选框节点？

2 个答案: