Solution 1 :

var couleurUnique = 1;

$("[id^=branche_search_form_couleurs_]").on("click", function() {    
  if (!$(this).is(":not(:checked)")) {
      var $newDivCouleur = $('<div class="poPupFiltre '+$(this).attr('id')+'"><div class="sousBlockPoPup"><a href="#" class="aPoPup"><img class="img-fluid imgPoPup" src="#" alt=""></a><p class="textPopUp"></p></div></div>');
      $newDivCouleur.attr("id", "PopUpCouleur_" + couleurUnique++);
    
   $($newDivCouleur).appendTo(".maxWidthPoPup").find(".textPopUp").html($(this).val()); 
  } else {
      console.log("TEST");
      $(document).find(".poPupFiltre."+$(this).attr('id')).remove(); 
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="branche_search_form_couleurs_1" />

<input type="checkbox" id="branche_search_form_couleurs_2" />

<div class="maxWidthPoPup">
    <div class="textPopUp"></div>
</div>

I think you need something like this,

What I have done is just add a class with the reference id of checkbox when it’s unchecked the class matches with the selected checkbox id will be removed.

Problem :

I have a form that generates several input fields, colors for a filter.
With JQuery, I generate a dynamic ID for all the fields and during a “Click” event, I ask it to create a DIV to display my filter if my field is not checked, so far everything works.

Where I can’t find the correct code writing is when:
during a “Click” event, if my field is checked I want to dynamically delete the DIV created $newDivCouleur

var couleurUnique = 1;

$("[id^=branche_search_form_couleurs_").on("click", function() {    
  if (!$(this).is(":not(:checked)")) {
    var $newDivCouleur = $('<div class="poPupFiltre"><div class="sousBlockPoPup"><a href="#" class="aPoPup"><img class="img-fluid imgPoPup" src="{{ asset ('../build/images/supprimer.svg') }}" alt=""></a><p class="textPopUp"></p></div></div>');
    $newDivCouleur.attr("id", "PopUpCouleur_" + couleurUnique++);
    $($newDivCouleur).appendTo(".maxWidthPoPup").find(".textPopUp").html($(this).val()); 
  } else {
    console.log("TEST");
    $(this).closest($newDivCouleur).remove(); 
  }
});

Comments

Comment posted by Rory McCrossan

Don’t use dynamically generated

Comment posted by Wali Waqar

could you possibly use a class instead of an Id

By