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

Когда нажимаю на кнопку класс "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>