Question

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.

Answer 1

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