Question

I have a complex div part on my page which combined with divs as following:

<div class="parent">
  <div class="child1">
    <div class="grandchild1" />
    <div class="grandchild2" />
  </div>
  <div class="child2">
    <div class="grandchild3"></div>
    <div class="grandchild4"></div>
  </div>
</div>

I wonder how to hide div child1 and child2 at one time, I know $(‘ .parent div’) will hide all the div inside of .parent div, I don’t want to hide grandchildren level, because when I set child1 visible, the grandchild1 and grandchild2 are still invisible. Thanks for help.

Answer 1

Use the direct descendent CSS selector:

$('.parent > div').hide();