Как скрыть ведь label если input value не задано?

Question

[WebforSelf]

Есть такой инпут

<label class="input-radio-label__item active"><input class="input-radio-label__input variant-radio" type="radio" name="height" value="" checked="checked"><span class="input-radio-label__title"></span></label>

Как скрыть весь label если инпут value не задано?

К примеру скрыть сам инпут можно через css даже

input[value=''] {
    display: none;
}

А вот как с label прям закрыть?

Answer 1

[iBird Rose]

переделай структуру так, чтобы на label не было никаких стилей. а все нужные вещи перенеси так, чтобы они были рядом с input.
тогда ты сможешь через ~ обращаться:
input[value=''] ~ span {display: none;}
тобишь в конечном итоге ты сможешь скрыть все кроме label. но так как внутри label будет пусто - его и самого не будет видно

Answer 2

[Андрей Корехов]

Помимо переделки структуры, можно добавить инпуту явный указатель на его label и далее обрабатывать через js

<label id="Указатель">
      <input class="input" data-target="Указатель"><span class="input-radio-label__title"></span>
</label>

<script>
	$(document).ready(function() {
		$('.input').each(function(){
			let $value = $(this).val();
                        let $target = $(this).attr('data-target');
			if (!$value) {
				$('#'+$target).css('display', 'none');
			} else {
				$('#'+$target).css('display', 'inline');
			}
		});
	});
</script>

Вроде такого