Как исключить элемент с querySelectorAll?

Question

let elementsAll = document.querySelectorAll('.elements__item');

elementsAll.forEach(element => {

  element.addEventListener('click', function() {
    let elementsDropdownAll = document.querySelectorAll('.elements__dropdown');

    elementsDropdownAll.forEach(elementsDropdown => {
      elementsDropdown.classList.remove('elements__dropdown--open');
    });
  });
});

<ul class="elements">
  <li class="elements__item">
    <div class="elements__dropdown"></div>
  </li>
  <li class="elements__item">
    <div class="elements__dropdown"></div>
  </li>
  <li class="elements__item">
    <div class="elements__dropdown"></div>
  </li>
</ul>

При клике на каждый .elements__item нахожу все элементы с классом .elements__dropdown и удаляю у них модификатор. Вопрос: как можно сделать, чтобы в переменной elementsDropdownAll находились все элементы .elements__dropdown, но кроме того, который находится в том блоке, по которому произошел клик?

Answer 1

Пользуйтесь аргументами event

переделайте в element.addEventListener('click', function(event)

и посмотрите в console.log(event.target) вы получите тот элемент на котором сработало событие, далее имея список, имея элемент на котором сработало событие можете сделать всё что вы задумали

Answer 2

Можно просто у всех удалить класс, а потом текущему елементу добавить его, с использованием ивента, как упоминал Aziz Umarov :

let elementsAll = document.querySelectorAll('.elements__item');

elementsAll.forEach(element => {

  element.addEventListener('click', function(e) {
    let elementsDropdownAll = document.querySelectorAll('.elements__dropdown');

    elementsDropdownAll.forEach(e => e.classList.remove('elements__dropdown--open'));

    this.querySelector('.elements__dropdown').classList.add('elements__dropdown--open');

  });
});

.elements__dropdown {
  display: none;
}

.elements__dropdown--open {
  display: block;
}

<ul class="elements">
  <li class="elements__item">
    <div class="elements__dropdown">1</div>
  </li>
  <li class="elements__item">
    <div class="elements__dropdown">2</div>
  </li>
  <li class="elements__item">
    <div class="elements__dropdown">3</div>
  </li>
</ul>

БЛОГ НА HUSL

Как исключить элемент с querySelectorAll?

Ответы (2 шт):