Как убрать добавленный DOM-элемент при наведении на поле ввода?

Question

[suprascapularis69]

Здравствуйте. Есть форма, в которой необходимо сделать валидацию. Подсветить ошибку в обязательных полях получается, но сбросить всё в дефолтное состояние при клике на форму или же фокусе на поле ввода не выходит. При повторном сабмите сообщения об ошибке начинают создаваться заново. Прошу помощи в том, как правильно это сделать.

<form action="" class="form" novalidate>
                <div class="form-field">
                    <label for="name" class="form-label"><span>Наименование товара</span></label>
                    <input type="text" name="Product name" placeholder="Введите наименование товара" id="name" class="form-input required">
                </div>
                <div class="form-field form-field-big">
                    <label for="description" class="form-label">Описание товара</label>
                    <textarea name="Product description" placeholder="Введите описание товара" id="description" class="form-input big-input"></textarea>
                </div>
                <div class="form-field">
                    <label for="image" class="form-label"><span>Ссылка на изображение товара</span></label>
                    <input type="url" name="Product image link" placeholder="Введите ссылку" id="image" class="form-input required">
                </div>
                <div class="form-field form-field-last">
                    <label for="price" class="form-label"><span>Цена товара</span></label>
                    <input type="number" name="Product price" placeholder="Введите цену" id="price" class="form-input required">
                </div>
                <button class="form-button" type="submit">Добавить товар</button>
            </form>

let form = document.querySelector('.form'),
    formRequired = document.querySelectorAll('.required');


form.onsubmit = function () {
    
    
    formRequired.forEach(function (input) {
        if (input.value === '') {
            input.classList.add('error');
            var error = document.createElement('p');
            error.innerHTML = 'Поле является обязательным';
            error.classList.add('form-error');
            input.after(error);
        } else {
            input.classList.remove('error');
        }
    })


    return false;
}

Answer 1

[Elvis]

Перед проверкой удалите все ошибки.

let form = document.querySelector('.form'),
    formRequired = document.querySelectorAll('.required');


form.onsubmit = function () {
    
    if(document.querySelectorAll('.form-error')){
            for(let x of document.querySelectorAll('.form-error')){
              x.remove();
            }
          }
    
    formRequired.forEach(function (input) {
        if (input.value === '') {
            input.classList.add('error');
            var error = document.createElement('p');
            error.innerHTML = 'Поле является обязательным';
            error.classList.add('form-error');
            input.after(error);
        } else {
            input.classList.remove('error');
        }
    })


    return false;
}