Hide parent if all li children element have CSS style display: none

I'm not able to do it 'cause the li blocks are many on the page...

simplified HTML:

    <li class="first"> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://myweb.com/test/something" title="">AUDIO</a>
  <ul style="display: none;">
    <li class="  toto"> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://myweb.com/test/something" title="">Audio one</a>
      <ul style="display: none;">
        <li class="  toto"> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://myweb.com/test/something" title="">Accessories (<font color="#0b8553"><b>0</b></font>)</a></li>
        <li class="  toto" style="display:none"> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://myweb.com/test/something" title="">Audio mp3 (<font color="#0b8553"><b>0</b></font>)</a></li>
        <li class="  toto" style="display:none"> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://myweb.com/test/something" title="">Audio player (<font color="#0b8553"><b>1</b></font>)</a></li>
      </ul>
    </li>
    <li class="last  toto" style="display:none"> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://myweb.com/test/something" title="">Audio hifi</a>
      <ul style="display: none;">
        <li class="last  toto" style="display:none"> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://myweb.com/test/something" title="">Audio items (<font color="#0b8553"><b>0</b></font>)</a></li>
      </ul>
    </li>
  </ul>
</li>

<li class="first"> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://myweb.com/test/something" title="">OTHER</a>
  <ul style="display: none;">
    <li class="  toto" style="display:none"> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://myweb.com/test/something" title="">other 2</a>
      <ul style="display: none;">
        <li class="  toto" style="display:none"> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://myweb.com/test/something" title="">other 3 (<font color="#0b8553"><b>0</b></font>)</a></li>
        <li class="  toto" style="display:none"> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://myweb.com/test/something" title="">other 4 (<font color="#0b8553"><b>0</b></font>)</a></li>
        <li class="  toto" style="display:none"> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://myweb.com/test/something" title="">other 5 (<font color="#0b8553"><b>1</b></font>)</a></li>
      </ul>
    </li>
    <li class="last  toto" style="display:none"> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://myweb.com/test/something" title="">other 6</a>
      <ul style="display: none;">
        <li class="last  toto" style="display:none"> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://myweb.com/test/something" title="">other 7 (<font color="#0b8553"><b>0</b></font>)</a></li>
      </ul>
    </li>
  </ul>
</li>

as you can see the first block has some <li class=" toto"> without css display none, while the second block (OTHER) has all the li with style="display:none"

so, I need to hide that specific .first ONLY with jQuery... and again, there are many blocks like that on the page.

eg.

if(!$(".first").children().is(':visible')) {
  $(".first").hide();
}

this doesn't work 'cause it selects all the .first on the page, I need to check that for each .first individually and hide or keep it....

The final result in this case must be:

AUDIO (without "OTHER")

Normally you would just filter the li.first elements based on whether the total number of li descendant elements equals the number selected with li:hidden.

$('li.first').filter(function() {
  return $(this).find('li').length === $(this).find('li:hidden').length;
}).hide();

However, that clearly won't work in your case because technically all the descendant li elements are hidden in your HTML because their parent ul element is also hidden.

If you want to check based on the display property of each li element, then you can use:

Updated Example

$('li.first').filter(function () {
  return $(this).find('li').length === $(this).find('li').filter(function () {
    return $(this).css('display') === 'none';
  }).length;
}).hide();