CODEWITHSUNDEEP
htmlcsshtml-lists
Yamiko
Yamiko

Reputation: 5453

Remove double bullets in nested list

Nested list have double bullets. One for the li and another for the child list.

example

    <ul>
        <li>item</li>
        <li>item</li>
        <li>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </li>
    </ul>

Upvotes: 14

Views: 6375

Answers (6)

mhasan
mhasan

Reputation: 107

This is the perfect solution I got, which is able to remove all level nested list styles.

    <ul>
        <li>level 1</li>
        <li>level 1</li>
        <li>level 1
            <ul>
                <li>level 2</li>
                <li>level 2
                    <ul>
                        <li>level 3</li>
                        <li>level 3</li>
                        <li>level 3</li>
                        <li>level 3
                            <ul>
                                <li>level 4</li>
                                <li>level 4</li>
                                <li>level 4</li>
                            </ul>
                        </li>
                        <li>level 3</li>
                    </ul>
                </li>
                <li>level 2</li>
                <li>level 2</li>
            </ul>
        </li>
        <li>level 1</li>
    </ul>


// remove list style in multilevel
var list = document.getElementsByTagName('li');

for (var i=0, max=list.length; i<max; i++){
    if(list[i].childNodes.length)
        list[i].style.listStyle = "none";
}

Upvotes: 0

Dave Chen
Dave Chen

Reputation: 10975

Would you mind if I used styles? Updated

Code:

<ul>
    <li>item</li>
    <li>item</li>
    <li style="list-style:none">
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </li>
</ul>
<ol>
    <li>item</li>
    <li>item</li>
    <li style="list-style:none">
        <ol>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ol>
    </li>
</ol>

Another method might be running through the list of LI and adding the style by detecting child nodes. Example

Code (HTML is the same):

var li = document.getElementsByTagName("li");
    
for (var i=0, max=li.length; i < max; i++)
    if (li[i].childNodes.length > 1)
        li[i].style.listStyle = "none";

Upvotes: 5

Sylvareth
Sylvareth

Reputation: 165

In modern CSS, you can use the has-selector like this:

ul li:has(ul),
ol li:has(ol) {
   list-style: none;
}

Just be mindful that this isn't fully supported in all browsers yet, but coverage is pretty decent right now according to Caniuse (86.19% coverage at time of writing).

Upvotes: 4

Jay Harris
Jay Harris

Reputation: 4271

quick hack: remove the list item:

<ul>
    <li>item
    <li>item
    <ul>
         <li>item
         <li>item
         <li>item
    </ul>
</ul>

if you don't close the tags the browser will render it correctly, that is without the extra bullet. Note: this is valid html since you don't need to close <li> tags.

JSFIDDLE with both examples

source: Google

"as opposed to XHTML, even when delivered with the MIME type text/html – allows authors to omit certain tags."

from google:

if you have a list of items marked up as <li>List item</li>, you could instead just write <li>List item...

Omitting optional tags keeps your HTML formally valid...

Upvotes: -3

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

You can’t do this just in an external style sheet (as I presume you would want to). The reason is that there is no selector in CSS that would pick up those li elements that have a ul element as the first child. So your options are (apart from waiting indefinitely until CSS has a “parent selector”...):

  • Add class to such li elements and use a class selector. This is normally the preferred way.
  • Use JavaScript that recognizes such li elements and handles them, e.g. adding a class to them.
  • Use inline CSS, i.e. style attribute in those li elements.

Upvotes: 7

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324610

The nested list should be a child of one of the list items, like so:

<ul>
  <li>item</li>
  <li>item
    <ul>
      <li>item</li>
    </ul>
  </li>
</ul>

This is valid HTML.

Upvotes: 5

Related Questions