Hide parent div , when no child div inside

Question

How to set display none (or add css style) on parent div, if it doesn´t contain any child div? Child div is dynamically attached by system, so we need to set a css class on parent, when is no child inside. Any jquery idea?

You currently can't have css rules that apply to parents based on their children. More info: http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — freedomn-m, Mar 25 '16 at 08:38
Possible duplicate of [:empty selector for parent element](https://stackoverflow.com/questions/16470689/empty-selector-for-parent-element) — oucil, Sep 22 '17 at 13:06

Ankit Singh · Answer 1 · 2016-03-25T09:01:32.557

11

You don't need jQuery/ javascript/ angular or anything else

CSS3's :empty pseudo selector can help

.displayNoneWhenEmpty:empty{
  display:none;
}

<div class="displayNoneWhenEmpty">Not Empty</div>

<div class="displayNoneWhenEmpty"></div>

Inspect after running the script, and see that style applies to empty div

edited Mar 25 '16 at 09:01

answered Mar 25 '16 at 08:39

Ankit Singh

24,525
11
66
89

score 0 · Answer 2 · answered Mar 25 '16 at 08:37

0

Set a display: none; by default to your parent. And when you dynamically attach the child, you set display: block

answered Mar 25 '16 at 08:37

Hyukchan Kwon

382
1
5
20

score 0 · Accepted Answer · answered Mar 25 '16 at 08:40

0

if($("<parent>").children().length == 0) 
$("<parent>").hide();

answered Mar 25 '16 at 08:40

boomcode

399
1
14

score 0 · Answer 4 · answered Mar 25 '16 at 08:42

0

I am assuming following html

HTML

<div class="parent">
  <div class="child">

  </div>
</div>

Use this jquery code

Jquery

if($('.parent').is(':empty')){
   $('.parent').hide();
}

answered Mar 25 '16 at 08:42

Gaurav Aggarwal

9,809
6
36
74

Hide parent div , when no child div inside

4 Answers4