@Chelovekvekvek

Как удалить динамически добавляемый класс?

Есть список элементов(<li>), внутри каждого элемента списка есть <div> с информацией. Конструкция такая:

<ul>
<li class="js-contacts-form">
   <div>
        <p class="detail-work__close"> ✖ </p>
            инфа1
   </div>
</li>
<li class="js-contacts-form">
   <div>
        <p class="detail-work__close"> ✖ </p>
            инфа2
   </div>
</li>
</ul>

При клике на <li> - открывается в поп-ап окне содержимое контейнера <div> этого <li>. Это реализовано таким способом:
$('.js-contacts-form').click(function() {
	$(this).addClass('show');
});

т.е. <li> добавляется класс show, которому в стилях прописано показывать скрытый блок, который внутри этого класса.
Нужно по клику на <p class="detail-work__close"> ✖ </p> в поп-ап окне удалять у этого <li> класс show, тогда поп-ап окно будет скрываться. Проблема в том, что код
$('.detail-work__close').click(function() {
	$('.js-contacts-form').removeClass('show');
});

не удаляет класс show, видимо потому что до этого его добавили по клику. Вопрос: как можно по клику на .detail-work__close удалять у .js-contacts-form класс show?
  • Вопрос задан
  • 148 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Проблема в том, что код <...> не удаляет класс

Удаляет. А потом событие продолжает всплывать, и обработчик клика по .js-contacts-form добавляет класс обратно. Останавливайте всплытие в обработчике клика по .detail-work__close; или проверяйте перед добавлением класса, где был клик и не добавляйте класс, если... ну, думаю понятно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы