Нахождение динамического c дочернего элемента предыдущего элемента

Question

Это мой текущий html:

<div class="wrapper">
    <div class="label"></div>
    <div class="warning"></div> // Dynamic
</div>
<div class="input"></div>
.
.
. // repeated 3 more times

Так что в моем файле JS я пропускаю oop через входы и добавляю прослушиватель к каждому, который удаляет класс из элемента ввода, когда сосредоточенным. Но я также хотел бы проверить, присутствует ли элемент 'предупреждение' в предыдущем элементе, и удалить его, если он есть.

Это лучшее, что я могу придумать (и он не работает : D):

const inputs = document.querySelectorAll('.input');

inputs.forEach(input => {
    input.addEventListener('focus', () => {
        input.classList.remove('input--invalid')
        input.previousElementSibling.removeChild(document.querySelector('.warning'));
    });
});

Вероятно, пропустил что-то очевидное (кроме полного придумывания)!

Answer 1

Вам необходимо охватить запрос предыдущим элементом:

input.previousElementSibling.removeChild(input.previousElementSibling.querySelector('.warning'));

Answer 2

Я думаю, что ваша проблема может быть в том, что

input.previousElementSibling.removeChild(document.querySelector('.warning'));

пытается удалить первый элемент .warning, найденный во всем документе, из предыдущего элемента ElementSibling.

Попробуйте

const warningDiv = input.previousElementSibling.querySelector(".warning");
if (warningDiv) warningDiv.remove();