HTML mal formado: cómo NO mostrar una viñeta en un elemento li vacío

Question

Tengo algunos html que se crean/producen desde una aplicación flash & Necesito mostrar/procesar en firefox.

El HTML está mal formada, por lo que escupir vacío li elementos & listas sin ul ol o elementos pero va a escupir los li elementos.

¿Hay una bandera CSS o cualquier método para no mostrar una bala li li si el elemento está vacío (ver ejemplo de código de lo que vacío significa más abajo)?

Si un elemento li no tiene innerText, muestra la viñeta. Pero no quiero que haga eso, quiero que NO muestre la viñeta si no hay texto interno en el elemento li. ¿Hay alguna forma de hacerlo sin tener que analizar 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

Si desea eliminar los elementos li vacías (donde "vacío" significa ninguno o sólo el contenido de espacio en blanco), se puede hacer:

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

Alternativamente, podría configurar las lis de vacío a:

list-style-type: none; 

agregando una clase adecuada, pero los resultados pueden no ser consistentes en todos los navegadores. Algunos dejarán un espacio para el li vacío, otros lo eliminarán. También podría usar una clase con:

display: none; 

para dejar el li allí pero no mostrarlo y no tener espacio. Tu decides.

Answer 2

No, no hay una manera. Hay :empty pero eso no funciona cuando hay un elemento <font> debajo y no hay :has en CSS. Puede utilizar :has con jQuery, sin embargo, y puesto que usted ha marcado que javascript supongo que es una opción:

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

¿Funcionaría?

Answer 3

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

}); 

http://jsfiddle.net/yU8aJ/