Hide
without creating empty row

Question

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

Coffee
Milk
tea

``` 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.

Accepted Answer

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

Hide <li> without creating empty row

Solution

Problem