I am trying to hide a list item by using the following code (for example)

<ol>
  <li>Coffee</li>
  <li style="visibility:hidden">Milk</li>
  <li>tea</li>
</ol>

But unfornately, it renders as follows with an empty row:

1. Coffee

3. Tea

What I want is simply like this:

1. Coffee
2. Tea

I am asking if there is a neat way to fix this? Thanks.

I am trying to hide a list item by using the following code (for example)

<ol>
  <li>Coffee</li>
  <li style="visibility:hidden">Milk</li>
  <li>tea</li>
</ol>

But unfornately, it renders as follows with an empty row:

1. Coffee

3. Tea

What I want is simply like this:

1. Coffee
2. Tea

I am asking if there is a neat way to fix this? Thanks.

• javascript
• html

Share Improve this question Follow asked Apr 6, 2011 at 18:59 ZeigaZeiga 20144 silver badges1414 bronze badges 2

• I suppose <!-- <li>Milk</li> --> is out of the question? – Kaivosukeltaja Commented Apr 6, 2011 at 19:02
• On what event is the list item meant to be removed/hidden? Is there some kind of logic behind it, or should it always be the second li? – David Thomas Commented Apr 6, 2011 at 19:08

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Use "display:none" instead of "visibility:hidden"

EDIT: visibility: hidden makes an element invisible but while keeping it in the flow of the DOM, so it still occupies the same space it would if it weren't invisible, meanwhile display: none treats it as if that element isn't there to begin with