Как скрыть блоки но открыть если в нем есть span?

Question

[an]

Есть список

<ul>
<li>
<input type="radio"  value="flat_rate:32" >
<label >Code 6, MB1 500g max 90cm: </label>
</li>
<li>
<input type="radio"  value="flat_rate:32" >
<label >Code 6, MB1 500g max 90cm: </label>
</li>
<li>
<input type="radio"  value="flat_rate:32" >
<label >Code 6, MB1 500g max 90cm: <span ><bdi><span>CHF</span>13.00</bdi></span>
</label>
</li>
</ul>

мне нужно скрыть все li внутри которых нету тега span
т.е грубо говоря дать li display none
но как сделать если в нем есть span как в последнем, дать ему display block

Спасибо

Comments

[Вадим]

на css - никак, пока :has не станет нормально поддерживаться, хотя если Вы ориентированы только под последние несколько версий и не ориентированы на firefox, то уже можно

[an]

Вадим, а через li + разве нельзя?

[an]

an, или label + span

[Вадим]

an, Нет, потому что правило будет применено к последнему указанному элементу.
Вы же хотите скрыть весь li.

И у Вас span вложен в label. Какой +?

[an]

Вадим, понял. спасибо

Answer 1

[Сергей Соколов]

Определить CSS класс .hidden { display: none; }
И выполнить:

document.querySelectorAll('li')
  .forEach(li => li.classList.toggle('hidden', !li.querySelector('span')));

для каждого элемента списка устанавливает или снимает класс hidden, в зависимости от того, найдётся ли span где-нибудь внутри этого элемента.