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

Question

[Дмитрий]

Нужно показать скрытые "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');
}
});

Answer 1

[0xD34F]

скрипт работает лишь тогда, когда ты что-то напишешь в поле

Это как? В смысле - как вам удаётся что-либо написать в скрытый инпут?

Но окей, вам виднее...

Где инпуты находятся, что за инпуты, какой класс надо переключать:

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} ${inputSelector}`).on('input', ({ target: t }) => {
  $(t).closest(blockSelector).toggleClass(className, !$(t).val());
}).trigger('input');

// или

document.querySelectorAll(`${blockSelector} ${inputSelector}`).forEach(function(n) {
  n.addEventListener('input', this);
  n.dispatchEvent(new Event('input'));
}, ({ target: t }) => t.closest(blockSelector).classList.toggle(className, !t.value));

Answer 2

[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');
        }
    });
});

Comments

[Дмитрий]

Пытаюсь завести, но никак.

[Дмитрий]

Не хочет со спойлеров вместе работать.
Знаний ноль в JS, не могу никак сделать.
Мне нужно скрыть все ul, решил использовать спойлер который при нажатии на кнопку "добавить еще" показывает блок с тремя полями.
Но если прописать в первое поле (li class="input-ingr") значение в value, нужно чтобы спойлер не скрывал ul с полями.