Как игнорировать поля у которых установлен display:none?

Question

[Сашка Брамс]

есть код такой структуры:

<div class="wrapper>
  <input text..>
  <input text..>
  <div class="hide">
      text.. <select..> <input text>
  </div>
  <input text..>
</div>

length показывает 4. нужно чтобы input который в блоке с родителем hide, не считало, а выбросило из потока.

document.querySelectorAll('.wrapper input').length // 4

Как сделать чтобы все что внутри class="hide" - display none, выбрасывалось из потока и игнорировалось JS ?

UPD
Установить полю type="hidden" не знаю сработает ли или же нет, не суть, подобные варианты не подходят т.к старые браузеры не дают менять аттрибут type у полей.

Answer 1

[iCat]

Если бы у вас была однородная структура внутри <div class="wrapper"> (т.е. каждый input был бы обернут в свой div), можно было бы использовать такую выборку:

console.log(document.querySelectorAll('.wrapper input').length); // 4
console.log(document.querySelectorAll('.wrapper div:not(.hide) input').length); // 3

Если вы не можете изменить структуру на однородную, и вам просто нужно посчитать количество не скрытых элементов, можно сделать так:

console.log( document.querySelectorAll('.wrapper input').length - document.querySelectorAll('.wrapper .hide input').length); // 3

Если вы не можете изменить структуру на однородную, и вам нужно получить все нескрытые элементы (при условии, что только скрытые элементы обернуты в div), можно воспользоваться такой выборкой:

console.log(document.querySelectorAll('.wrapper > input').length); // 3

Очень многое зависит от того, что именно нужно сделать, и какие у вас ограничения на изменение структуры html.