Badly Formed HTML: How to NOT show a bullet on an empty li element

Question

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>

Answer 1

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?