.remove() not removing item in Jquery when checkbox unselected-CodePudding

I have checkbox that append an item when selected but will not remove it when deselected, just to clarify the appending part is working fine.

the 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();
        }
    });

the template:

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

CodePudding user response：

First you would run into problem with duplicated ids, once you did your append. Second jquery don't know what {{category.id}} refers to.

You could do it like:

$('.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();
  }
});

Demo

$('.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 >
  <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>