I have some html that is created/output from a flash application & I need to show/render it in firefox.

The HTML is badly formed, so it will spit out empty li elements & lists with no ul or ol elements but it will spit out the li elements.

Is there a css flag or any method to not show a li bullet if the li element is empty(see code example of what empty means below)?

If a li element has no innerText, then it shows the bullet. But I dont want it to do that, I want it to NOT show the bullet if there is no innerText in the li element. Is there any way to do this without having to parse 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>

I have some html that is created/output from a flash application & I need to show/render it in firefox.

The HTML is badly formed, so it will spit out empty li elements & lists with no ul or ol elements but it will spit out the li elements.

Is there a css flag or any method to not show a li bullet if the li element is empty(see code example of what empty means below)?

If a li element has no innerText, then it shows the bullet. But I dont want it to do that, I want it to NOT show the bullet if there is no innerText in the li element. Is there any way to do this without having to parse 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>

• javascript
• html
• css

3 Answers 3

No, there isn't a way. There's :empty but that doesn't work when there's a <font> element beneath it, and there's no :has in CSS. You can use :has with jQuery, though, and since you've tagged it javascript I assume it's an option:

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

Would that work?

If you want to remove the empty li elements (where "empty" means none or only whitespace content), you could do:

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

Alternatively, you could set the empty LIs to:

 list-style-type: none;

by adding a suitable class, but results might not be consistent across browsers. Some will leave a space for the empty li, some will remove it. You could also use a class with:

 display: none;

to leave the li there but not display it and not have a space. It's up to you.

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

});

http://jsfiddle/yU8aJ/