Почему не срабатывает функция remove?

Question

[sharpsss]

В кратце: надо удалить класс auto во всех дивах с классом filter , пока получается вот такой вот код

<div class="container_filters">
		<div class ="filter auto">
			<div class="filter_name">Бренд</div>
			<div class="select-box">
    <div class="select-box__current" id="select-box__current" tabindex="1">
        <div class="select-box__value"><input class="select-box__input" type="radio" id="0" value="Nike" name="Ben" checked="checked" />
            <p class="select-box__input-text">Nike</p>
        </div>
        <div class="select-box__value"><input class="select-box__input" type="radio" id="1" value="Adidas" name="Ben" />
            <p class="select-box__input-text">Adidas</p>
        </div>
     <svg  class="select-box__icon" viewBox="0 0 13 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.32629 8.33668C6.09953 8.33668 5.8728 8.2366 5.69992 8.03686L0.259558 1.74836C-0.0865195 1.34834 -0.0865195 0.699763 0.259558 0.299898C0.605496 -0.0999661 1.16649 -0.0999661 1.5126 0.299898L6.32629 5.86431L11.14 0.300093C11.4861 -0.0997718 12.047 -0.0997718 12.3929 0.300093C12.7392 0.699957 12.7392 1.34853 12.3929 1.74856L6.95267 8.03705C6.77971 8.23682 6.55297 8.33668 6.32629 8.33668Z" fill="#FF740F"/>
</svg>
    </div>
    <ul class="select-box__list">
        <li><label class="select-box__option" for="0" >Nike</label></li>
        <li><label class="select-box__option" for="1" >Adidas</label></li>
    </ul>
</div>
		</div>
		<div class ="filter auto">
			<div class="filter_name">Бренд</div>
			<div class="select-box">
    <div class="select-box__current" id="select-box__current" tabindex="0">
        <div class="select-box__value"><input class="select-box__input" type="radio" id="2" value="s" name="ds" checked="checked" />
            <p class="select-box__input-text">Nike</p>
        </div>
        <div class="select-box__value"><input class="select-box__input" type="radio" id="3" value="d" name="ds" />
            <p class="select-box__input-text">Adidas</p>
        </div>
     <svg  class="select-box__icon" viewBox="0 0 13 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.32629 8.33668C6.09953 8.33668 5.8728 8.2366 5.69992 8.03686L0.259558 1.74836C-0.0865195 1.34834 -0.0865195 0.699763 0.259558 0.299898C0.605496 -0.0999661 1.16649 -0.0999661 1.5126 0.299898L6.32629 5.86431L11.14 0.300093C11.4861 -0.0997718 12.047 -0.0997718 12.3929 0.300093C12.7392 0.699957 12.7392 1.34853 12.3929 1.74856L6.95267 8.03705C6.77971 8.23682 6.55297 8.33668 6.32629 8.33668Z" fill="#FF740F"/>
</svg>
    </div>
    <ul class="select-box__list">
        <li><label class="select-box__option" for="2" >Nike</label></li>
        <li><label class="select-box__option" for="3" >Adidas</label></li>
    </ul>
</div>
		</div>
</div>

document.querySelectorAll('.select-box__option').forEach(elemz => { // К массиву элементов с селектором .button применяете метод forEach, в котором выполняется стрелочная функция, принимающая в качестве аргумента elem, который является элементом
  elemz.addEventListener('click', _=> { // к элементу добавляете обработчик события click
	 const activez = document.querySelectorAll('div.auto');
  		    for(var nz = 0; nz < activez.length; nz++) {
    activez[nz].classList.remove('auto');
  }
  });
});

клик ок работает в консоли разраба когда нажимаю подсвечивается, но remove не срабатывает :(
пробовал replace заменить типа auto заменяем на пустоту но тоже не помогло , не понимаю честно говоря почему она не срабатывает , отрисовывать по новой что ли этот элемент без класса auto, спасiти будь ласка

Answer 1

[Надим]

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

Например:

document.body.addEventListener('click', function(e) {
    console.log('Произведён клик по элементу', e.target);
});

Соответствует ли элемент в e.target нужным вам условиям можно проверять через метод matches.

Comments

[sharpsss]

подскажите пожалуйста , правильно ли я понял ?

const buttons = document.getElementsByClassName('select-box__input-text');
  for (const button of buttons) {
    button.addEventListener('click', () => button.closest(".filter").style.overflow='visible');
  }
  const buttons_hiden = document.getElementsByClassName('select-box__option');
  for (const button_hiden of buttons_hiden) {
    button_hiden.addEventListener('click', () => button_hiden.closest(".filter").style.overflow='hidden');
  }

[Надим]

sharp97, вывесите где-нибудь демо, так я вам ничего не могу сказать, глазами код запускать не умею.