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

Question

I'm trying to create a todo list. 我正在尝试创建一个待办事项列表。 The problem is when I try to delete the checkbox when the task is done. 问题是当任务完成后我试图删除该复选框。 I tried to make a function inside the principal function with an if/else statement inside. 我试图在主体函数中创建一个带有if / else语句的函数。 But it doesnt work. 但它不起作用。

I suppose I need to check if the checkbox is checked first and then develop a script that removes the li/checkbox element. 我想我需要先检查复选框是否被选中，然后开发一个删除li / checkbox元素的脚本。 But I don't know how to implement it. 但是我不知道如何实现它。 Here's my code: 这是我的代码：

    <!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

You can just add an EventListener to your checkbox and hook into the change event. 您可以仅将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);
        }
    });
}

Alternatively: 或者：

function deleteItem() {
    if(this.checked) {
        this.parentNode.parentNode.removeChild(this.parentNode);
    }
}

function addItem() {
    ...
    checkbox.addEventListener("change", deleteItem);
}

Answer 2

Have modified your script. 已修改您的脚本。 Try this. 尝试这个。

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 个解决方案

解决方案1
0 已采纳 2015-07-26 11:01:40

解决方案2
0 2015-07-26 11:09:56

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-07-26 11:01:40

解决方案2 0 2015-07-26 11:09:56

解决方案1
0 已采纳 2015-07-26 11:01:40

解决方案2
0 2015-07-26 11:09:56