I want to hide all the <li>
if they are empty or if there any blank space in <li>
.
I am doing it like this:
$("li:empty").filter(function(i,v){return $.trim($(v).text()).length == 0;}).css('display', 'none');
Is this the wrong syntax?
If I create a class to make empty <li>
invisible, it works fine. Like this:
$("li[class='hideLi']").filter(function(i,v){return $.trim($(v).text()).length == 0;}).css('display', 'none');
But I don't know which <li>
will be empty .
Can anybody help me plz.
I want to do display=none
if the <li>
is empty.
Here is my code:-
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("td:empty").css('display', 'none');
$("div:empty").css('display', 'none');
$(!$.trim('li:empty')).hide();
$("li[class='hideLi']").filter(function(i,v){return $.trim($(v).text()).length == 0;}).css('display', 'none');
});
</script>
<ul>
<li style="border:red solid 1px ">HI</li>
<li style="border:green solid 1px "> </li>
<li style="border:blue solid 1px " class="hideLi"> </li>
</ul>
Thanks,
You can use .hide()
To make this work if you have spaces, you can use jQuery.trim()
$("li").each(function() {
if(!$.trim($(this).html())) {
$(this).hide();
}
});
working example: fiddle example
$('li').filter(function(){
return $.trim($(this).html()) == '';
}).hide()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With