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?
Asked
Active
Viewed 2,483 times
1
-
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
4 Answers
8
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
Ankit Singh
- 22,335
- 10
- 60
- 85
0
Set a display: none;
by default to your parent. And when you dynamically attach the child, you set display: block
Hyukchan Kwon
- 350
- 1
- 3
- 18
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();
}
Gaurav Aggarwal
- 8,921
- 5
- 27
- 65