@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')
  } 

})
)
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
используйте e.target, чтобы отследить, на какой именно элемент вы кликнули. И уже у него меняйте класс, точечно
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@alekcena
Нелинейный наставник
parentNode - это элемент выше, а не ниже

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

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

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

Вариантов решений много.
Нужна более конкретная задача и код.
Ответ написан
Комментировать
delphinpro
@delphinpro
frontend developer
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')
  } 
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы