Introduction:
Here I will explain how to use jQuery to hide parent div of child div empty or jQuery hide parent div incase if child div contains empty or without html data. By using empty selector and parent method we can find whether child div empty or not in jQuery.
Description:
In previous articles I explained jQuery Hover dropdown menu, jQuery bouncing menu example, jQuery zoom image on mouse over using zoom plugin, jQuery split string into array by comma and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to use jQuery to hide parent div if child contains empty.
In previous articles I explained jQuery Hover dropdown menu, jQuery bouncing menu example, jQuery zoom image on mouse over using zoom plugin, jQuery split string into array by comma and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to use jQuery to hide parent div if child contains empty.
By using empty selector and parent
method we can hide parent div if child div contains empty for that we need to
write the code like as shown below
<script type="text/javascript">
$(function () {
$('#btnHide').click(function () {
$(".childiv:empty").parent().hide();
});
})
</script>
|
If you
want to check it in complete example you need to write the code like as shown
below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery Hide Parent Div
if Child Div Contains Empty</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('#btnHide').click(function () {
$(".childiv:empty").parent().hide();
});
})
</script>
</head>
<body>
<div id="div1"
class="parentdiv">
Test Div1
</div>
<div id="div2"
class="parentdiv">Test2<div class="childiv">Div2</div>
</div>
<div id="div3"
class="parentdiv">Test3<div class="childiv">Div3</div>
</div>
<div id="div4"
class="parentdiv">Test4<div class="childiv"></div>
</div>
<div id="div5"
class="parentdiv">Test5<div class="childiv">Div</div>
</div><br />
<input type="button"
id="btnHide"
value="Hide
Divs" />
</body>
</html>
|
Live
Demo
For
live demo try to click below button to hide parent div if child div contains
empty
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
0 comments :
Note: Only a member of this blog may post a comment.