在点击事件中删除动态ID

Question

我有一个生成几个输入字段的颜色，一个过滤器的颜色。使用JQuery，我为所有字段生成一个动态ID，并在“ Click”事件期间，如果未选中我的字段，则要求它创建一个DIV以显示我的过滤器，到目前为止一切正常。

我找不到正确的代码编写的时间是：在“点击”事件中，如果选中了我的字段，我想动态删除创建的DIV $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(); 
  }
});

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

我认为您需要这样的东西，

我所做的只是添加了一个具有复选框参考ID的类，如果未选中，则将删除与所选复选框ID匹配的类。