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.
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 Email
|
|||
0 comments :
Note: Only a member of this blog may post a comment.