Как удалить класс у всех потомков элемента?

Question

[Alexandr1996]

При валидации формы, когда все верно заполнено форма сбрасывается, но при этом нужно удалить класс success у всех потомков, у которых он есть, чтобы убрать галочки с инпутов.
код формы:

<form id="formForm" class="popup__form">
                <div class="popup__form-flex top">
                    <div class="popup__form-group">
                        <p class="popup__input-name">Ваше имя</p>
                        <input id="name" class="popup__input " type="text" name="name" placeholder="Поле для ввода"
                            autocomplete="off">
                        <img class="popup__form-success-icon" src="images/popup/success-icon.svg" alt="">
                        <img class="popup__form-error-icon" src="images/popup/error-icon.svg" alt="">
                    </div>
                    <div class="popup__form-group">
                        <p class="popup__input-name">Ваш телефон</p>
                        <input id="phone" class="popup__input " type="text" name="phone"
                            placeholder="+7 (XXX) XXX-XX-XX" autocomplete="off">
                        <img class="popup__form-success-icon" src="images/popup/success-icon.svg" alt="">
                        <img class="popup__form-error-icon" src="images/popup/error-icon.svg" alt="">
                    </div>
                </div>
                <div class="popup__form-group">
                    <p class="popup__input-name email">Email</p>
                    <input id="email" class="popup__input " type="text" name="email" placeholder="[e-mail]"
                        autocomplete="off">
                    <img class="popup__form-success-icon" src="images/popup/success-icon.svg" alt="">
                    <img class="popup__form-error-icon" src="images/popup/error-icon.svg" alt="">
                </div>
                <div class="popup__form-flex bottom">
                    <div class="popup__form-group">
                        <p class="popup__input-name">Страна</p>
                        <input id="country" class="popup__input " type="text" name="country"
                            placeholder="Поле для ввода" autocomplete="off">
                        <img class="popup__form-success-icon" src="images/popup/success-icon.svg" alt="">
                        <img class="popup__form-error-icon" src="images/popup/error-icon.svg" alt="">
                    </div>
                    <div class="popup__form-group city">
                        <p class="popup__input-name">Город</p>
                        <input id="city" class="popup__input " type="text" name="city" placeholder="Поле для ввода"
                            autocomplete="off">
                        <img class="popup__form-success-icon" src="images/popup/success-icon.svg" alt="">
                        <img class="popup__form-error-icon" src="images/popup/error-icon.svg" alt="">
                    </div>
                </div>
                <div class="popup__form-group">
                    <p class="popup__input-name">Сообщение</p>
                    <input id="message" class="popup__input " type="text" name="message" placeholder="Поле для ввода"
                        autocomplete="off">
                    <img class="popup__form-success-icon" src="images/popup/success-icon.svg" alt="">
                    <img class="popup__form-error-icon" src="images/popup/error-icon.svg" alt="">
                </div>
                <div class="popup__consent">
                    <label class="popup__label">
                        <input id="check" class="popup__check-hide " type="checkbox">
                        <span class="popup__check-style"></span>
                        Согласие на обработку
                        <a href="#">персональных данных</a>
                    </label>
                </div>
                <button class="popup__btn" type="sumbit">
                    <img src="images/popup/load.svg" alt="">
                    <span>заказать звонок</span>
                </button>
                <p class="popup__error-message"></p>
            </form>

я объявил переменную: const removeSuccess = document.querySelectorAll('#formForm .popup__form-group');

код проверки:

form.onsubmit = function (event) {
        event.preventDefault();
        let index = 0;
        for (let i = 0; i < input_req.length; i++) {
            input_req[i].classList.remove('error');
            if (input_req[i].value === '') {
                errorMessage.innerText = 'Заполните, пожалуйста, все поля в форме';
                index++;
            }
        }
        if (index === 0) {
            if (form.querySelector('.popup__check-hide').checked) {
                errorMessage.innerText = '';
                removeSuccess.classList.remove("success");
                form.reset();
            } else {
                $('.popup__label').addClass('error');
                errorMessage.innerText = 'Пожалуйста, согласитесь с условиями';
            }
        }
    };

если document.queryselectorall использовать вообще ничего не происходит и даже форма не сбрасывается. в консоли ошибка: Cannot read property 'remove' of undefined.
если использовать document.queryselecotor то работает но сбрасывает класс только у первого.

подскажите как реализовать удаление класса. пробовал form.childNodes.classList.remove('success') тоже что-то не так пишу видимо.

Answer 1

[v3shin]

А если так? Вместо document можно использовать нужный элемент, например, форму.

(document.querySelectorAll('selector') || []).forEach(element => {
    element.classList.remove('myClass');
});

Answer 2

[webdisigner]

почему не так?