CODEWITHSUNDEEP
javascriptjquery
JGeer
JGeer

Reputation: 1852

Hide parent when child got display none

I want to create some jQuery that hide the parent when a child element got display none as html.

My html looks like this:

<li class="formListBlock payment_mollie_applepay paymentchecked">
    <label for="p_method_mollie_applepay" style="display: none;"></label>
</li>

Tried:

<script>
if $("label[for='p_method_mollie_applepay']").not(":visible"){  
$(this).parent().hide();
}   
</script>

So now I want to hide the <li> element with a display none, when the label got the class display: none;

How can I achieve this the best way?

Upvotes: 0

Views: 111

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337570

To achieve this you can use :has() to filter the li elements to retrieve only those containing hidden label elements, before you hide() or remove() them.

$('li:has(label:hidden)').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="formListBlock payment_mollie_applepay paymentchecked">
    <label for="p_method_mollie_applepay" style="display: none;">Hidden</label>
  </li>
  <li class="formListBlock payment_mollie_applepay paymentchecked">
    <label for="p_method_mollie_applepay">Visible</label>
  </li>
  <li class="formListBlock payment_mollie_applepay paymentchecked">
    <label for="p_method_mollie_applepay" style="display: none;">Hidden</label>
  </li>
  <li class="formListBlock payment_mollie_applepay paymentchecked">
    <label for="p_method_mollie_applepay">Visible</label>
  </li>
</ul>

Upvotes: 1

Related Questions