Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Hide Parent DIV if Child DIV (HTML) is Empty with Example

Mar 17, 2015
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.

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


Test Div1
Test2
Div2
Test3
Div3
Test4
Test5
Div


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 RSS subscribe by email Subscribe by Email

0 comments :

Give your Valuable Comments

Other Related Posts

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.