Geek Answers Handbook

Poorly formed HTML: how to NOT show a bullet on an empty li element

I have html that is created / output from a flash application, and I need to show / display it in firefox.

HTML is poorly formed, so it spits out empty li elements and lists without ul or ol elements , but it spits out li .

Is there a css flag or some method to not display the li bullet if the li element is empty (see the code example on which empty means below)?

If the li element does not have innerText, then it shows a bullet. But I do not want this to be done this way, I want it to NOT show the bullet if there is no innerText inside the li element. Is there a way to do this without the need for HTML parsing?

// 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>
+5
3

li ( "empty" "" " " ), :

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

LI :

 list-style-type: none;

, . li, . :

 display: none;

li, . .

+2

, . :empty, , <font> , :has CSS. :has jQuery, , javascript , :

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

?

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

});

http://jsfiddle.net/yU8aJ/

0
source

More articles:


All Articles