Как удалить удаляемый узел флажка?

Я пытаюсь создать список дел. Проблема заключается в том, что я пытаюсь удалить флажок, когда задача выполнена. Я попытался сделать функцию внутри основной функции с выражением 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>

источник

2015-07-26 Sara

Вы можете просто добавить 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); 
}

источник

2015-07-26 11:01:40

Какова ценность 'this' внутри обработчика событий? –

Спасибо! это сработало! – Sara

изменили сценарий. Попробуй это.

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

источник

2015-07-26 11:09:56 Samir

Не знаю, но это не сработало: L – Sara

Как удалить удаляемый узел флажка?

ответ

Смежные вопросы