Запретить многократное добавление элементов при повторных кликах

Question

Всем доброго дня. Есть пара вопросов, подскажите, пожалуйста:

Как при повторных кликах на элемент a.knopka запретить многократное добавление <div class="block_ul"><ul><li></li></ul></div>?

Как при клике на элемент .close удалить кроме класса knopka_active также и <div class="block_ul"><ul><li></li></ul></div> у всех элементов a.knopka, где это было добавлено?

Благодарю!

$("a.knopka").on("click", function() {
  $(this).addClass('knopka_active').append('<div class="block_ul"><ul><li></li></ul></div>');
});

$(".close").on("click", function() {
  $("a.knopka").removeClass('knopka_active');
});

.knopka {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
.knopka_active {
  border: 2px solid red;
}
.block_ul ul {
  list-style: none; margin: 0; padding: 0;
}
.block_ul li {
  display: inline-block;
  margin: 0; padding: 0;
  width: 10px;
  height: 10px;
  border: 1px solid green;
}
.close {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid chocolate;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="knopka"></a>
<a href="#" class="knopka"></a>
<a href="#" class="knopka"></a>

<div class="close">Отмена</div>

Answer 1

Можно вот так:

$("a.knopka").on("click", function() {
  if(!$(this).hasClass('knopka_active')) { // Проверяем отсутствие класса
    $(this).addClass('knopka_active').append('<div class="block_ul"><ul><li></li></ul></div>');
  }
});

$(".close").on("click", function() {    
  $("a.knopka").removeClass('knopka_active');
  $("a.knopka").find('.block_ul').remove(); // удаляем вложенные элементы .block_ul
});

БЛОГ НА HUSL

Запретить многократное добавление элементов при повторных кликах

Ответы (1 шт):