jquery - Jqueryで空白のリストが見つかりません

Question

私のDomではli、子としていくつかのas.netテキストボックスを含むいくつかのを取得しました。いくつかのテキストボックスをfalseとして表示するように設定する必要があります。これを行うと、liこのテキストボックスの周りにラップされたものがhtmlで空として表示されます。だから私はそれらを削除することを決心し、このコード（およびもっとたくさん）を使用しました

    <script type="text/javascript">
    $(document).ready(function (e) {
        $('#u li').each(function () {
            if ($(this).html().length == 0) {
                $(this).remove();
            }
        });
    });
</script>

驚いたことにli、空のもののループには入りません。追加されたHTMLに注意してください

    <ul id="u">
                   <li class="first-item odd-item">
                       <span id="ContentPlaceHolderDefault_cphContents_ShopConfirmation_2_lblFirstname">Firstname</span>
                        <input type="text" id="ContentPlaceHolderDefault_cphContents_ShopConfirmation_2_txtFirstname" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$cphContents$ShopConfirmation_2$txtFirstname">
                        <span style="color:Red;visibility:hidden;" id="ContentPlaceHolderDefault_cphContents_ShopConfirmation_2_reqirefieldFirstname">*</span>
                   </li>
                   <li class="odd-item">
                       <span class="m-left" id="ContentPlaceHolderDefault_cphContents_ShopConfirmation_2_lblLastname">Lastname</span>
                        <input type="text" id="ContentPlaceHolderDefault_cphContents_ShopConfirmation_2_txtLastname" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$cphContents$ShopConfirmation_2$txtLastname">
                       <span style="color:Red;visibility:hidden;" id="ContentPlaceHolderDefault_cphContents_ShopConfirmation_2_reqirefieldLastname">*</span>
                   </li>
                   <li class="third-item odd-item">
                       <span id="ContentPlaceHolderDefault_cphContents_ShopConfirmation_2_lblEmployeenumber">Emloyee Number</span> 
                        <input type="text" id="ContentPlaceHolderDefault_cphContents_ShopConfirmation_2_txtEmployeenumber" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$cphContents$ShopConfirmation_2$txtEmployeenumber">
                    </li>
                    <li class="odd-item">


                    </li>
                    <li class="odd-item">
                        <span id="ContentPlaceHolderDefault_cphContents_ShopConfirmation_2_lblAddress">Address</span>
                        <select id="ContentPlaceHolderDefault_cphContents_ShopConfirmation_2_dropdownaddress" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$cphContents$ShopConfirmation_2$dropdownaddress">
    <option value="-----------Select-----------">-----------Select-----------</option>
    <option value="dfddfd">dfddfd</option>
    <option value="gdfgfg">gdfgfg</option>
    <option value="fhgfgfgf">fhgfgfgf</option>

</select>
                    </li>
                    <li class="third-item last-item odd-item">


                    </li>

                  </ul>

Answer 1

<li>質問に編集した HTML から判断すると、要素内にコンテンツはありません。ただし、innerHTML要素の は空の文字列ではなく、空白を含む文字列です。HTML をトリミングするだけで動作するはずです。

$(document).ready(function (e) {
    $('#u li').each(function () {
        if ($.trim($(this).html()).length == 0) {
            $(this).remove();
        }
    });
});

この jsFiddle demoを見てください。

Answer 2

更新：私の投票は@AnthonyGristの答えになりました-空白が問題のようです。

OPがチェックしようとしているの<input type="hidden">ではなく、=='none'の<input>要素をチェックしようとしていると思います。style.display

だから、ここにそのための解決策があります：

$('#u li input').each(function() {
    var display = $(this).css('display');
    if (display=='none') {
        $(this).closest('li').remove();
    }
});

Answer 3

$('#u li').each(function(){
   if($('input', this).is(':hidden')){
      $(this).remove();
   }
});

Answer 4

if ( $(this).is(':empty') ){  // BOOLEAN TRUE / FALSE
  //do something
}