Hide third child div in jquery

Question

I am trying to hide the third child div in jQuery, but the first child div subchild hides it.

I am trying to use the code below: -

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 hides sub-child-3 .

here jsfiddle

Any suggestion

Thanks in advance.

Answer 1

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

> does everything.

Answer 2

try it

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

or you can use as

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

which represents the relative children of the parent 1

Answer 3

Try the following: (Updated)

 $('#parent-1').children('div').eq(2).hide(); 

or

 $('#parent-1 > div').eq(2).hide(); 

.hide() will work the same as display : none;

You can use .show() later to display the item again. (if you want to).

Answer 4

it is very simple to do this only with css:

 #child-3{ display:none; } 

Answer 5

it should work

 $('#child-3',$('#parent-1')).hide();