javascript - HTML mal formé : comment NE PAS afficher une puce sur un élément li vide

J'ai du HTML qui est créé/sorti d'une application Flash et j'ai besoin de l'afficher/rendre dans Firefox.

Le HTML est mal formé, donc il va générer des éléments li vides et des listes sans éléments ul ou ol, mais il va générer les éléments li.

Existe-t-il un drapeau CSS ou une méthode pour ne pas afficher un puce de li si l'élément li est vide (voir l'exemple de code de ce que vide signifie ci-dessous) ?

Si un élément li n'a pas de innerText, alors il affiche le point. Mais je ne veux pas que cela se produise, je veux qu'il n'affiche PAS le point si l'élément li n'a pas de innerText. Y a-t-il un moyen de faire cela sans avoir à analyser le 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>

Réponse n°1

Non, il n'y a pas de moyen. Il y a :empty mais cela ne fonctionne pas lorsqu'il y a un élément <font> dessous, et il n'y a pas de :has en CSS. Vous pouvez cependant utiliser :has avec jQuery, et puisque vous l'avez tagué javascript, je suppose que c'est une option :

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

Est-ce que cela marcherait ?

Réponse n°2

Si vous voulez supprimer les éléments li vides (où « vide » signifie aucun contenu ou seulement des espaces), vous pouvez faire :

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

Sinon, vous pourriez définir les LI vides sur :

 list-style-type: none;

en ajoutant une classe appropriée, mais les résultats pourraient ne pas être cohérents selon les navigateurs. Certains laisseront un espace pour le li vide, d'autres le supprimeront. Vous pourriez également utiliser une classe avec :

 display: none;

laisser le li là mais ne pas l'afficher et ne pas avoir d'espace. C'est à vous de décider.