Как удалять/добавлять соседним элементам класс?

Question

[ForSureN1]

Добрый день, решаю задачку, и что то остановился на этом моменте, никак не могу разобраться, нужно по клику на карточку, добавлять соседним элементам класс, с этим я справился, но теперь по клику на другую карточку, эти классы не удаляются, у тех, где были. Заранее благодарю за помощь

let cards = document.querySelectorAll('.card')

cards.forEach((card) => {
	card.addEventListener('click', () => {
		card.classList.remove('active')
		card.previousElementSibling.classList.add('active')
		card.nextElementSibling.classList.add('active')
	})
})

Ссылка на песочницу https://codepen.io/forsuren1/pen/WNExmwa

P.S.
Добавил вот такое условие, работает почти как нужно, только почему то по клику на первую карточку, в консоли выходит ошибка, и ничего не добавляется соседней карточке, но если кликнуть на последнюю карточку, то предыдущей добавляется

let cards = document.querySelectorAll('.card')

cards.forEach((card, index, cards) => {
	card.addEventListener('click', () => {
		// cards[0].classList.remove('active')
		// cards[1].classList.remove('active')
		// cards[2].classList.remove('active')
		// cards[3].classList.remove('active')
		let parentnode = card.parentNode.children
		for (let sibling of parentnode) {
			sibling.classList.remove('active')
		}
		card.previousElementSibling.classList.add('active')
		card.nextElementSibling.classList.add('active')
	})
})

Comments

[Rsa97]

по клику на первую карточку, в консоли выходит ошибка

А чему равняется card.previousElementSibling при клике на первую карточку?

но если кликнуть на последнюю карточку, то предыдущей добавляется

Потому что ошибка возникает позже, на card.nextElementSibling.

Answer 1

[Rsa97]

document.querySelector('.cards').addEventListener(
  'click',
  (e) => {
    if (!e.target.matches('.card')) {
      return;
    }
    document.querySelectorAll('.card.active').forEach(
      (c) => c.classList.remove('active')
    );
    if (e.target.previousElementSibling) {
      e.target.previousElementSibling.classList.add('active');
    } 
    if (e.target.nextElementSibling) {
      e.target.nextElementSibling.classList.add('active');
    } 
  },
);

Comments

[ForSureN1]

Спасибо, теперь буду изучать ваш вариант :)

[ForSureN1]

Ааа, все настолько оказалось элементарным, просто получить еще один массив с ('.card.active')

Answer 2

[Павел]

Просто убирайте класс со всех карточек при клике

let cards = document.querySelectorAll('.card')

cards.forEach((card) => {
  card.addEventListener('click', () => {
    cards.forEach((item) => {
      item.classList.remove('active')
    })
    card.classList.remove('active')
    card.previousElementSibling.classList.add('active')
    card.nextElementSibling.classList.add('active')
  })
})

Comments

[ForSureN1]

в вашем варианте, по клику на первую карточку, выходит ошибка