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

Question

[Hellas]

<div class="head_block"> 
  <span class="label">1</span> 
  <span class="label">2</span> 
  <span class="label">3</span> 
  <span class="label">4</span>   
  <span class="label">5</span> 
  <input class="add_label">
</div>

Input добавляет элементы span в блок head_block.
5 элементов - максимум.
Как сделать так, чтобы при достижении 5-и элементов span в блоке head_block, к input добавлялся класс hide?

Answer 1

[lega]

Тоже самое что у Михаил Чирский только попроще
jsfiddle.net/w3q9f0fm

Comments

[Михаил Чирский]

Прикольно)

Answer 2

[Михаил Чирский]

Так?
https://jsfiddle.net/2azh2024/

Answer 3

[fetis26]

можно на CSS

.head_block .add_lable:nth-child(6) {
 display: none;
}

Comments

[Михаил Чирский]

Попробуйте добавить больше 6, и ваше условие не сработает) в моем примере, можно проверить это

[fetis26]

Михаил Чирский: как вы добавите больше 5, если инпут скрыт?

Если так хочется скрыть 5+ элементов, тогда
:nth-child(n+6) {display: none;}