HTMLが正しくない：空のli要素に箇条書きを表示しない方法

Question

フラッシュアプ​​リケーションから作成/出力されるhtmlがあります& Firefoxで表示/レンダリングする必要があります。

それは無いULやOL要素を示していますが、それは李要素を吐き出すます&空李要素を吐き出すますので、HTMLがひどく、形成されています。

li要素が空の場合、CSSのフラグを表示しない方法があります（の空白のコード例は以下を参照）。

li要素にinnerTextがない場合は、弾丸が表示されます。しかし、私はそれをやりたいとは思っていません、私はliT要素にinnerTextがない場合、弾丸を表示しないことを望みます。 HTMLを解析することなくこれを行う方法はありますか？

// example of badly formed HTML output from flash 
<textformat leading="2"> 
    <li> 
     <font style=" font-family: 'arial'; font-size: 14px; color: #FFFFFF; letter-spacing: 0px; "> 
      <b>Influence and Negotiation</b> 
      <font style=" font-size: 12px; color: #000000; "> 
      </font> 
     </font> 
    </li> 
</textformat> 

// sometimes I get an empty li element, which in Firefox shows the bullet. I want to NOT show the bullet/li element if it is empty 
<textformat leading="2"> 
    <li> 
     <font style=" font-family: 'arial'; font-size: 14px; color: #FFFFFF; letter-spacing: 0px; "> 
      <!-- empty li element --> 
     </font> 
    </li> 
</textformat> 

Answer 1

あなたが（「空」はどれか、空白のみコンテンツを意味していない）空のli要素を削除したい場合は、あなたができる：

：

function getText(el) { 
    if (typeof el.textContent == 'string') { 
    return el.textContent; 
    } 
    if (typeof el.innerText == 'string') { 
    return el.innerText; 
    } 
} 

var li, lis = document.getElementsByTagName('li'); 
var re = /^\s*$/; 

for (var i=0, iLen=lis.length; i<iLen; i++) { 
    li = lis[i]; 

    if (re.test(getText(li))) { 
    li.parentNode.removeChild(li); 
    } 
} 

また、あなたが空のLIを設定することができます

list-style-type: none; 

適切なクラスを追加することで、結果がブラウザ間で一致しないことがあります。いくつかは、空の李のためのスペースを残し、いくつかはそれを削除します。

display: none; 

このクラスを使用することもできますが、表示することはできず、スペースもありません。それはあなた次第です。

Answer 2

いいえ、方法はありません。 :emptyがありますが、その下に<font>という要素があり、CSSには:hasはありません。

$('li:has(font:empty)').remove(); 

だろうと仕事：あなたは、私はそれはオプションだと仮定jQueryのは、しかし、あなたはそれjavascriptをタグ付けしましたので、と:hasを使用することができますか？

Answer 3

$(document).ready(function(){ 
    $('li').each(function(){ 
     if($(this).html().length == 0) 
      $(this).css('list-style-type','none')       
    }); 

}); 

http://jsfiddle.net/yU8aJ/