Hide third child div in jquery

Question

I am trying to hide third child div in jQuery , but its hide first child div subchild.

I am trying with below code :-

Html :-

<div id="parent-1">
    <div id="child-1" class="child">CHILD 1
       <div id="sub-child-1" class="subchild">SUB CHILD 1</div>
       <div id="sub-child-2" class="subchild">SUB CHILD 2</div>
       <div id="sub-child-3" class="subchild">SUB CHILD 3</div>
    </div>
    <div id="child-2" class="child">CHILD 2</div>
    <div id="child-3" class="child">CHILD 3</div>
</div>

Jquery :-

$(document).ready(function () {
   $('div#parent-1 div:eq(2)').css("display", "none");
});

I need to hide child-3 here. but it is hiding sub-child-3.

here is jsfiddle

Any suggestion??

Thanks in advance.

Answer 1

$(document).ready(function () {
   $('div#parent-1 > div:eq(2)').css("display", "none");
});

The > does it all.