удалить динамический c ID в событии клика - PullRequest
Новая
       8

удалить динамический c ID в событии клика

0 голосов
/ 19 февраля 2020

У меня есть форма, которая генерирует несколько полей ввода, цвета для фильтра. С JQuery я генерирую динамический c ID для всех полей, и во время события «Click» я прошу его создать DIV для отображения моего фильтра, если мое поле не проверено, пока все работает.

Где я не могу найти правильный ввод кода, когда: во время события «Click», если мое поле отмечено, я хочу динамически удалить созданный 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(); 
  }
});

1 Ответ

1 голос
/ 19 февраля 2020 

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>

Я думаю, вам нужно что-то вроде этого,

Что я сделал, это просто добавил класс с идентификатором ссылки флажка, когда он не отмечен класс, соответствующий выбранному идентификатору флажка, будет удален.

...