Elemente entfernen, wenn sie in der Checkbox mit jquery markiert sind

Question

Wie kann ich Elemente entfernen, die ": checked" in der Checkbox mit jquery sind. Hier ist der Code zum Hinzufügen der Elemente.

template.html

<h2>To Do</h2> 
    <form name="checkListForm"> 
     <input type="text" name="checkListItem"/> 
    </form> 
    <div id="button">Add!</div> 
    <br/> 
    <div class="list"><div class="checkbox"></div></div> 

script.js

$(document).ready(function(){ 
$('#button').click(function(){ 
var $li = $('input[name=checkListItem]'); 
var toAdd = $li.val(); 
$('.checkbox').after('<input type="checkbox"/>' + toAdd + '</br>');}); 
if($('.checkbox').is(":checked")){$('.checkbox').child.remove();} 
}); 

Answer 1

Denn mit dieser Zeile:

$('.checkbox').after('<input type="checkbox"/>' + toAdd + '</br>'); 

Sie drei Domelemente einfügen: Eingabe + zwei Textknoten Ich würde vorschlagen, direkt plain JS zu verwenden. Darüber hinaus, weil Sie Element hinzugefügt werden dynamisch müssen Sie die Änderung Event-Handler an den oberen statischen Vorfahren (d.h .: Liste)

$(document).ready(function() { 
 
    $('#button').click(function() { 
 
     var $li = $('input[name=checkListItem]'); 
 
     var toAdd = $li.val(); 
 
     $('.checkbox').after('<input type="checkbox"/>' + toAdd + '</br>'); 
 
    }); 
 
    $('.list').on('change', ':checkbox', function (e) { 
 
     if (this.checked) { 
 
      this.nextSibling.remove(); 
 
      this.nextSibling.remove(); 
 
      this.remove(); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<h2>To Do</h2> 
 

 
<form name="checkListForm"> 
 
    <input type="text" name="checkListItem"/> 
 
</form> 
 
<div id="button">Add!</div> 
 
<br/> 
 

 
<div class="list"> 
 
    <div class="checkbox"></div> 
 
</div>

Answer 2

$(document).ready(function() { 
 
    $('#button').click(function() { 
 
    var $li = $('input[name=checkListItem]'); 
 
    var toAdd = $li.val(); 
 
    $('.checkbox').prepend('<input type="checkbox" id="checklist-item-val"/>' + toAdd + '</br>'); 
 
    $('#checklist-item-val').on('click', function() { 
 
     if ($(this).is(":checked") === true) { 
 
     //$('.checkbox').empty(); 
 
     // What are we emptying? 
 
     } 
 
    }); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>To Do</h2> 
 
<form name="checkListForm"> 
 
    <input type="text" name="checkListItem" /> 
 
</form> 
 
<button id="button">Add!</button> 
 
<br/> 
 
<div class="list"> 
 
    <div class="checkbox"></div> 
 
</div>