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 Remove or Hide Div Element If It's Empty or Contains No Data

Mar 18, 2015
Introduction

Here I will explain how to use
jQuery to hide or remove div if it’s empty or jQuery hide or delete div incase if div empty. By using html selector property we can check whether div empty or not based on that we can hide or remove div if it’s empty.

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 or remove div if it’s empty.

By using html selector we can check whether div empty or not. If it’s empty we can hide or remove div for that we need to write the code like as shown below

If you want to remove div if it’s empty


<script type="text/javascript">
$(function () {
$('#btnHide').click(function () {
if ($('#pdiv').html().trim()) {
alert('Div Contains Data')
}
else {
$('#pdiv').remove();
}
});
})
</script>

If you want to hide div if it’s empty


<script type="text/javascript">
$(function () {
$('#btnHide').click(function () {
if ($('#pdiv').html().trim()) {
alert('Div Contains Data')
}
else {
$('#pdiv').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 Check whether div empty or not</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('#btnHide').click(function () {
if ($('#pdiv').html().trim()) {
alert('Div Contains Data')
}
else {
$('#pdiv').remove();
}
});
})
</script>
</head>
<body>
<form id="form1">
<div id="pdiv"></div>
<input type="button" id="btnHide" value="Hide Div" />
</form>
</body>
</html>


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

Note: Only a member of this blog may post a comment.

© 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.