sharp97
@sharp97
не фонтан но брызги есть

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

В кратце: надо удалить класс 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ти будь ласка
  • Вопрос задан
  • 110 просмотров
Пригласить эксперта
Ответы на вопрос 1
@zkrvndm
Софт для автоматизации
У вас несколько неоптимальный подход, нет смысла вешать обработчики на каждый элемент в отдельности, лучше просто повесьте один обработчик на какого-то общего родителя и через него отслеживайте клики по дочкам.

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

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

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

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