Как правильно удалить класс?

Question

[MRcracker]

Пытаюсь удалить класс accordion-item__title-arrow-off при клике и заменить его на accordion-item__title-arrow. Сделать нужно чтобы класс заменялся только у элемента по которому я кликаю. На других элементах с данными классами это не должно отражаться. Что я делаю не правильно?

<div class="accrordion">
          <div class="accordion-item">
            <div class="accordion-item__trigger">
              <div class="accordion-item__trigger-title accordion-item__title-arrow-off">
                Мероприятия
              </div>
            </div>
            <div class="accordion-item__content">
               текст
            </div>
          </div>
        </div>

let accordionTrigger = document.querySelectorAll('.accordion-item__trigger');
accordionTrigger.forEach((item)=>
item.addEventListener('click', () =>{
  const parent = item.parentNode;

  parent.classList.toggle('accordion-item_active');

  if(parent.classList.contains('accordion-item__title-arrow-off')) {
    parent.classList.remove('accordion-item__title-arrow-off')
  } 

})
)

Answer 1

[Алексей Дубровин]

parentNode - это элемент выше, а не ниже

if(parent.classList.contains('accordion-item__title-arrow-off')) {
    parent.classList.remove('accordion-item__title-arrow-off')
  }

Вы в верхнем элементе пытаетесь найти эти классы, а их там нет.

Так же в переборе элементов у вас есть item - это дом элемент
У него есть метод querySelector

Вариантов решений много.
Нужна более конкретная задача и код.

Answer 2

[Сергей delphinpro]

let accordionTriggers = document.querySelectorAll('.accordion-item__trigger');
accordionTriggers.forEach(trigger => item.addEventListener('click', () => {
  const item = trigger.parentNode;
  item.classList.toggle('accordion-item_active');

  if(let icon = trigger.querySelector('.accordion-item__title-arrow-off')) {
    icon.classList.remove('accordion-item__title-arrow-off')
  } 
});