jQuery - How to add css to a parent element if child element has certain css class

Question

I searched through the "If parent element has x, add y css to child" questions but didn't find an answer for my case.

I have a page with some input fields inside multiple div elements. Some of these div elements have a displayNone class, which hides the element. But the parent div of this element has a grey background. So the element self is hidden but I still see the grey background. I want to add the displayNone to the parent div so the grey background will be hidden as well.

Also, adding the displayNone class to the parent div should have no effect on the other div element (with greyBackground class).

I am not able to change the html so I need a jQuery/javascript solution.

I was thinking something like

$('.theClass').each(function() {
    if($("div").hasClass("displayNone")){
      document.getElementById("idElement").style.display = "none";
    }    
});

but i need to add the class to a div element without an id.

Here is some code

.formcheckbox {
  background: #F2F2F2;; 
}

.greyBackground{
  background: #F2F2F2;; 
}

.displayNone  {
  display: none; 
} 

<div class="greyBackground">
  <label>Label</label>
  <input type="text"/>
</div><br>

<div class="fieldgrp">
  <div class="formcheckbox">
    <div class="displayNone">
      <div class="field-input ">
          <div class="field">
            <input name="abc" value="10" id="10" type="checkbox">
            <label id="_10" for="10">10 items </label>
          </div>
          <div class="field">
            <input name="abc" value="20" id="20" type="checkbox">
            <label id="_20" for="20">20 items </label>
          </div>
          <div class="field">
            <input name="abc" value="50" id="50" type="checkbox">
            <label id="_50" for="50">50 items </label>
          </div>
      </div>
    </div>
  </div>
</div>

And the FIDDLE

Answer 1

I guess your problem is the parent of the element has a padding on it and even if you hide the child elements the element is still visible like this snippet:

 .formcheckbox { background: purple; padding:20px; } .displayNone { display: none; } 

 <div class="formcheckbox"> <label>Label</label> <input type="text"/> </div><br> <div class="fieldgrp"> <div class="formcheckbox"> <div class="displayNone"> <div class="field-input "> <div class="field"> <input name="abc" value="10" id="10" type="checkbox" class=""> <label id="_10" for="10" class="">10 items </label> </div> </div> </div> </div> </div> 

To solve it the way you want you can use parents() function on Jquery:

 $('.displayNone').parents('.formcheckbox').addClass('displayNone') 

 .formcheckbox { background: purple; padding:20px; } .displayNone { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="formcheckbox"> <label>Label</label> <input type="text"/> </div><br> <div class="fieldgrp"> <div class="formcheckbox"> <div class="displayNone"> <div class="field-input "> <div class="field"> <input name="abc" value="10" id="10" type="checkbox" class=""> <label id="_10" for="10" class="">10 items </label> </div> </div> </div> </div> </div>