Jquery - How to remove parent element if child element is without text?

Question

I try to hide parent element li if child b is empty without success. Can you please tell me what I am doing wrong ? Thank you very much.

Jquery:

$('.mod-links li a b').each(function(){
       if($(this).text() == 0){
        $(this).parent('li').remove();
       }
});

HTML:

<ul class="mod-links ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" data-theme="d" data-role="listview">
 <li class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-d" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d"> <!-- parent element -->

    <div class="ui-btn-inner ui-li">
      <div class="ui-btn-text">
       <a class="small ui-link-inherit" href="/cz/cs/268_.html">
         <b></b> <!-- empty element -->
       </a>
      </div>
    <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
    </div> 

 </li>
</ul>

Answer 1

Since there is no empty textnode in b you can use :empty selector

$('.mod-links li').has('a b:empty').remove()

If b can have blank spaces then

$('.mod-links li').filter(function () {
    return $.trim($(this).find('a b:empty').text()) == '';
}).remove()

Answer 2

您可以使用：empty selector选择空b元素以及.closest（）以获取最近的祖先li并将其删除：

$('b:empty').closest('li').remove();

Answer 3

Instead of if($(this).text() == 0){ , use if($(this).is(":empty")){ .

jQuery:

$('.mod-links li a b').each(function(){
       if($(this).is(":empty")){
        $(this).closest('li').remove();
       }
});

Fiddle: http://jsfiddle.net/L7FPJ/

Also note that I changed .parent('li') to .closest('li') , since .parent only retrieves elements from one level up the DOM tree.

Docs: .is , :empty , and .closest .