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

Question

[kamisarlapsha]

Есть много кнопок. По клику на одну из них к ней добавляется класс active и к их контейнеру добавляется btn-active. Ниже показал схему по которой надо работать с контейнером с кнопками.

К примеру, нажимаем на первую кнопку:

<div class="container btn-active">  <!--Тут добавился класс-->
<button class="active">Кнопка</button> <!--Тут добавился класс-->
<button>Кнопка</button>
<button>Кнопка</button>
</div>

Потом нажимаем на вторую:

<div class="container btn-active"> <!--Тут класс остался-->
<button>Кнопка</button>
<button class="active">Кнопка</button> <!--Тут добавился класс-->
<button>Кнопка</button>
</div>

Потом опять нажимаем на вторую:

<div class="container"> <!--Тут класс удалился-->
<button>Кнопка</button>
<button>Кнопка</button> <!--Тут класс удалился-->
<button>Кнопка</button>
</div>

С добавление класса по кнопка проблем нет, сделал так:

$('button').click(function(){
      $(this).toggleClass('active').siblings().removeClass('active');
});

Вопрос в том, как по такой схеме добавлять класс к container.

Answer 1

[0xD34F]

Кому и какие классы будем добавлять:

const containerSelector = '.container';
const buttonSelector = 'button';
const activeContainerClass = 'btn-active';
const activeButtonClass = 'active';

Как будем добавлять:

$(document).on('click', buttonSelector, function(e) {
  const $button = $(this).toggleClass(activeButtonClass);
  $button
    .closest(containerSelector)
    .toggleClass(activeContainerClass, $button.hasClass(activeButtonClass))
    .find(buttonSelector)
    .not($button)
    .removeClass(activeButtonClass);
});

Или, к чёрту jquery:

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    const container = button.closest(containerSelector);
    container.querySelectorAll(buttonSelector).forEach(n => {
      n.classList[n === button ? 'toggle' : 'remove'](activeButtonClass);
    });
    container.classList.toggle(
      activeContainerClass,
      button.classList.contains(activeButtonClass)
    );
  }
});

Answer 2

[Александр]

.parent()

Comments

[kamisarlapsha]

Это я понимаю, но как его добавлять по схеме выше ? У меня по сути по кнопке дальше появляется блок. И контейнер растягивается. А когда блоков нет, то нужно чтобы контейнер становился обычным

$('button').click(function(){
      $(this).toggleClass('active').siblings().removeClass('active');
      $(this).parent().toggleClass('active'); //Сделав так, это будет работать не правильно
});