Possible Duplicate:
Remove Empty elements with jQuery
I want to remove empty <li> using jQuery. I am trying to do this but my code is not working as per my requirements. My code is show below.
Script
$(document).ready(function(e) {
$('#u li').each(function() {
if($(this).html(' ')) {
$(this).remove();
}
});
});
HTML
<ul id="u">
<li>hi</li>
<li></li>
</ul>
It should be as simple as that:
$('#u li:empty').remove()
<li> elements do have a child text node. See jsfiddle.net/zeYMNYou are setting the html of the <li> to one space character, not checking if it's empty. Instead, try this (trimming might be a good idea to catch spaces and newlines):
if(!$.trim($(this).html())) {
$(this).remove();
}
Also, you could use jQuery's :empty selector (this checks all child nodes including text nodes):
$('#u li:empty').remove();
However, this does not match elements with "invisible text nodes", for example <li> </li> (one space) → jsfiddle.
<script>
$(document).ready(function(e) {
$('#u li').each(function() {
if($(this).html().length == 0)
{
$(this).remove();
}
});
});
</script>
u, hence#u...#ulwouldn't match anything (you're thinking oful, but that would match every ul element instead of that particular one).