बुरी तरह से स्थापित एचटीएमएल: कैसे नहीं एक खाली li तत्व

Question

पर एक गोली को दिखाने के लिए मुझे लगता है कि बनाई गई है कुछ html/एक फ्लैश आवेदन & मैं दिखाने/फ़ायरफ़ॉक्स में यह रेंडर करने के लिए की जरूरत से उत्पादन किया है।

एचटीएमएल बुरी तरह से, का गठन किया जाता है, तो यह बाहर खाली ली तत्वों & सूचियों कोई उल साथ थूक या तत्वों राजभाषा लेकिन यह ली तत्वों थूक से बाहर होगा।

वहाँ एक सीएसएस झंडा या किसी विधि एक ली गोली नहीं दिखाने के लिए अगर li तत्व रिक्त है (क्या खाली नीचे का मतलब है की कोड उदाहरण देखें) है?

यदि किसी ली तत्व में कोई आंतरिक टेक्स्ट नहीं है, तो यह बुलेट दिखाता है। लेकिन मैं यह नहीं करना चाहता हूं, मैं चाहता हूं कि अगर यह ली तत्व में कोई आंतरिक पाठ नहीं है तो मैं बुलेट को नहीं दिखाना चाहता हूं। 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

आप खाली ली तत्वों को निकालना चाहते हैं (जहां "खाली" कोई भी या इसमें केवल रिक्त सामग्री का मतलब है), तो आप कर सकता है:

:

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); 
    } 
} 

वैकल्पिक रूप से, आप के लिए खाली फूल सेट कर सकते हैं

list-style-type: none; 

उपयुक्त कक्षा जोड़कर, लेकिन परिणाम ब्राउज़र में लगातार नहीं हो सकते हैं। कुछ खाली ली के लिए जगह छोड़ देंगे, कुछ इसे हटा देंगे। आप कक्षा के साथ भी उपयोग कर सकते हैं:

display: none; 

वहां ली छोड़ने के लिए, लेकिन इसे प्रदर्शित नहीं किया गया है और कोई स्थान नहीं है। यह आप पर निर्भर करता है।

Answer 2

नहीं है, वहाँ एक रास्ता नहीं है। :empty है लेकिन यह तब काम नहीं करता है जब <font> तत्व नीचे है, और सीएसएस में :has नहीं है। आप के साथ jQuery, हालांकि, और आप इसे javascript टैग किया है के बाद से :has उपयोग कर सकते हैं मुझे लगता है यह एक विकल्प है:

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

चाहेंगे कि काम करता है?

Answer 3

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

}); 

http://jsfiddle.net/yU8aJ/