Как сделать так чтобы при пустом input определённый элемент скрывался?

Question

[Александр Тимофеев]

Написал так: когда начинаешь печатать в input появляется span, но дело в том, что если потом стереть то, что написал, то этот span остаётся, а надо чтобы скрывался. Написал условие внутри функции, но что-то не срабатывает, span вообще не появляется.

<label class="form-group">
<span>×</span>
<input class="form-control validate" id="email" type="text" required>
</label>

$('label.form-group').keyup(function () {
		$(this).children('span:first-child').show();
		
		if ($('label.form-group input').value === '' || $('label.form-group input').value === this.defaultValue) {
			$('label.form-group>span:first-child').hide();
		}
	});

Answer 1

[tripcollor]

Вот решение, там код сами уже как нужно причешете
https://jsfiddle.net/ca2u0jao/

Answer 2

[Negwereth]

Поставь свой span после инпута и используй Силу:

input[value=""] + span {
    display: none;
}

Comments

[Александр Тимофеев]

После мне ставить крайне не удобно. Всё остальное нарушается.

[Negwereth]

Александр Тимофеев: я вот как-то даже догадываюсь, что это типа крестик для очистки поля, да?

Answer 3

[TMLEX]

Тогда пусть по умолчанию span будет скрыт, если юзер в нем что-то пишет выполняется js: поле не пусто - display else none

Answer 4

[Stalker_RED]

Я не поленился и запустил ваш код - крестик всегда скрывается. Потому что у .form-group нет defaultValue, наверное.
https://jsfiddle.net/c7h9o2ra/