@Monachdg

Как убрать класс у родителя если input не пуст?

Нужно показать скрытые "display:none" поля, у который value не пустой.
То есть, если input уже имеет какой то текст, нужно у родителя удалить класс, который скрывает этот input.
Пример:
Есть 5 input, каждый обвернут в тег div, к div присвоен класс (display_none), который и скрывает его.
<div class="ingredient-b display_none"> <input type="text" value=""></div>
<div class="ingredient-b display_none"> <input type="text" value=""></div>
<div class="ingredient-b display_none"> <input type="text" value=""></div>

Если value имеет значение тогда нужно удалить класс у родителя и показать блок с input.
<div class="ingredient-b"> <input type="text" value="Я не пустой, удали класс и покажи меня"></div>
<div class="ingredient-b display_none"> <input type="text" value=""></div>
<div class="ingredient-b display_none"> <input type="text" value=""></div>

.display_none {display:none;}
Есть скрипт, который удаляет у родителя класс, но скрипт работает лишь тогда, когда ты что-то напишешь в поле.
Скрипт не срабатывает при перезагрузке страницы, и не удаляет класс даже если input не пустой.
$('input').blur(function()
{
    if( $(this).val() != '' ) {
          $(this).parents('.ingredient-b').removeClass('display_none');
    }
else {
$(this).parents('.ingredient-b').addClass('display_none');
}
});
  • Вопрос задан
  • 336 просмотров
Пригласить эксперта
Ответы на вопрос 2
0xD34F
@0xD34F Куратор тега JavaScript
const blockSelector = '.ingredient-b';
const inputSelector = 'input';
const className = 'display_none';

Переключаем класс у всех и сразу:

$(blockSelector)
  .addClass(className)
  .filter((i, n) => $(inputSelector, n).val())
  .removeClass(className);

// или

document.querySelectorAll(blockSelector).forEach(n => {
  n.classList.toggle(className, !n.querySelector(inputSelector).value);
});

Или, только у того блока, в котором пользователь input отредактировал:

$(blockSelector).on('input', inputSelector, e => {
  $(e.delegateTarget).toggleClass(className, !$(e.target).val());
});

// или

document.querySelectorAll(`${blockSelector} ${inputSelector}`).forEach(function(n) {
  n.addEventListener('input', this);
}, ({ target: t }) => t.closest(blockSelector).classList.toggle(className, !t.value));
Ответ написан
Комментировать
mahmudchon
@mahmudchon
https://codepen.io/anton-marinin/pen/YzPmKyb
$(function() {
    $("input").each(function() {
        if (!$(this).val()) {
            $(this).parent().addClass('display_none');
        } else {
            $(this).parent().removeClass('display_none');
        }
    });
});
Ответ написан
Ваш ответ на вопрос

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

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