Tengo una casilla de verificación que agrega un elemento cuando se selecciona, pero no lo elimina cuando se anula la selección, solo para aclarar que la parte adjunta funciona bien.
el jQuery:
$('.category-checkbox input[type="checkbox"]').click(function (){ if ($(this).is(':checked')) { // Add the element to the div with an id identifier $('.items').append('<div id="[{{category.id}}]">123123</div>'); } else { // Remove the element from the div targeted by the id identifier $('.items #[{{category.id}}]').remove(); } });la plantilla:
<div class="inventory-content"> <div class='category'> <div>Categories</div> <div class='category-checkbox'> {%for category in categories%} <input type="checkbox" id="{{category.id}}" name="{{category.name}}" value="{{category.id}}"> <label for="{{category.name}}"> {{category.name}}</label><br> {%endfor%} </div> </div> <div class='items'></div> </div>Primero, se encontraría con un problema con identificaciones duplicadas, una vez que haya agregado su archivo. El segundo jquery no sabe a qué se refiere {{category.id}} .
Podrías hacerlo como:
$('.category-checkbox input[type="checkbox"]').click(function() { if ($(this).is(':checked')) { // Add the element to the div with an id identifier $('.items').append(`<div id="item_${this.id}">123123</div>`); } else { // Remove the element from the div targeted by the id identifier $(`#item_${this.id}`).remove(); } });Manifestación
$('.category-checkbox input[type="checkbox"]').click(function() { if ($(this).is(':checked')) { // Add the element to the div with an id identifier $('.items').append(`<div id="item_${this.id}">123123</div>`); } else { // Remove the element from the div targeted by the id identifier $(`#item_${this.id}`).remove(); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="inventory-content"> <div class='category'> <div>Categories</div> <div class='category-checkbox'> <input type="checkbox" id="cat1" name="cat1" value="cat1"> <label for="cat1"> cat1</label><br> <input type="checkbox" id="cat2" name="cat2" value="cat2"> <label for="cat2"> cat2</label><br> <input type="checkbox" id="cat3" name="cat3" value="cat3"> <label for="cat3"> cat3</label><br> </div> </div> <div class='items'></div> </div>