Почему когда нажимаю на кнопку класс не удаляется?

Question

[Samalamadoit]

Когда нажимаю на кнопку класс "active-item-li" не удаляется.

У меня есть порядка 20 таких li, мне надо что бы по нажатию на li добавлялся класс 'active-item-li' , а по нажатию на button - удалялся. Однако класс добавляется, но не удаляется. В чем проблема?

jQuery(document).ready(function($) {

    $('.close-item-li').on('click', function() {
        $(this).parent().removeClass('active-item-li');
    })

    $('.type-product').on('click', function() {
        $(this).addClass('active-item-li');
    });
    
});

<li class="type-product active-item-li">

  <button class="close-item-li">x</button>

  <a href="#" class="link">ссылка</a>    
  
  <a>ссылка</a>  

</li>

Answer 1

[Стас Хитрич]

Скорее всего дело в всплытии ивента, вам необходимо отменить всплытие при нажатии на кнопку внутри элемента li.

$('.type-product').on('click', function(event) {
     event.stopPropagation();   // Вот тут
     $(this).addClass('active-item-li');
});

Comments

[Samalamadoit]

Стас Хитрич, не к сожалению не помогло

Answer 2

[Дима Долготер]

смотри. ты поставил клик на li, и когда ты кликакшь на убрать ссылку, ты кликаешь не на кнопку, а на li
повесь добавление класса на отдельную кнопку