How to ignore fields that have display:none set?

Question

JavaScript

I have code like this:

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

length shows 4. it is necessary that the input which is in the block with the parent hide, does not count, but throws it out of the stream.

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

How do I get everything inside class="hide" - display none to be thrown out of the stream and ignored by JS ?
UPD
Set the type="hidden" field, I don't know if it will work or not, not the point, such options are not suitable because old browsers do not allow changing the type attribute of the fields.

Answer 1

If you had a homogeneous structure inside <div class="wrapper">(i.e. each inputwould be wrapped in its own div), you could use a selection like this:

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

If you can't change the structure to be homogeneous and you just need to count the number of non-hidden elements, you can do this:
If you can't change the structure to uniform and you need to get all non-hidden elements (assuming only hidden elements are wrapped in div), you can use this fetch:
A lot depends on what exactly needs to be done, and what are your restrictions on changing the html structure.