javascript - HTML Mal Formado: Como NÃO mostrar uma marca num elemento li vazio

Tenho algum HTML que é criado/output a partir de uma aplicação Flash e preciso mostrá-lo/renderizá-lo no Firefox.

O HTML está malformado, por isso irá gerar elementos li vazios e listas sem elementos ul ou ol, mas irá gerar os elementos li.

Existe alguma flag CSS ou algum método para não mostrar um marcador de li se o elemento li estiver vazio (veja o exemplo de código do que vazio significa abaixo)?

Se um elemento li não tiver innerText, então ele mostra o marcador. Mas eu não quero que faça isso, eu quero que NÃO mostre o marcador se não houver innerText no elemento li. Há alguma maneira de fazer isso sem ter que analisar o 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>

Resposta #1

Não, não há uma maneira. Existe :empty, mas isso não funciona quando há um elemento <font> abaixo dele, e não existe :has em CSS. Pode-se usar :has com jQuery, no entanto, e como marcou javascript, presumo que seja uma opção:

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

Isso funcionaria?

Resposta #2

Se quiser remover os elementos li vazios (onde "vazios" significa nenhum conteúdo ou apenas espaços em branco), pode fazer o seguinte:

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, poderia definir os LIs vazios para:

 list-style-type: none;

adicionando uma classe adequada, mas os resultados podem não ser consistentes em todos os navegadores. Alguns deixarão um espaço para o li vazio, outros irão removê-lo. Também poderia usar uma classe com:

 display: none;

deixar o li lá, mas não exibi-lo e não ter um espaço. Depende de ti.