Question

I am working on a navigation for a site that is composed of several jQuery accordions containing lists of links, like this:

<ul class="menu">
    <li>
        <h3>Header 1</h3>
        <ul>
            <li class="menuItem">Link 1</li>
            <li class="menuItem">Link 2</li>
            <li class="menuItem">Link 3</li>
        </ul>
    </li>
    <li>
        <h3>Header 2</h3>
        <ul>
            <li class="menuItem">Link 4</li>
            <li class="menuItem">Link 5</li>
            <li class="menuItem">Link 6</li>
        </ul>
    </li>
</ul>

The CMS that the site is built on, for some reason, sets any empty lists as self-closing <li> tags, like this:

<ul class="menu">
    <li>
        <h3>Header 1</h3>
        <ul>
            <li class="menuItem">Link 1</li>
            <li class="menuItem">Link 2</li>
            <li class="menuItem">Link 3</li>
        </ul>
    </li>
    <li />
</ul>

I am wondering if there is a way to find and remove all <li /> tags from the HTML using jQuery. Thanks!

EDIT: I forgot to mention, this only shows up in IE7. In IE8/9, the browser has <li></li> in the HTML, but it doesn’t render these tags as anything. The <li /> tag affects the layout in IE7 (it looks like it’s being rendered as a block element, so it’s pushing the content below it down).

Answer 1

For some reason, none of the fixes worked in IE6, though they did work in all other browsers. To get everything working in IE6, I added a class to the <li>‘s and used $('#xyz').remove(); in the body to get rid of the tags.