Всем доброго дня. Есть пара вопросов, подскажите, пожалуйста:
Как при повторных кликах на элемент 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>