How to hide a <li> item in html and make it not occupy any space?

Question

I have an html list like this:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

How can I hide a li item and make it not occupy any space? Let's say, I need the first li item (coffee) to be invisible, so the result will contain only Tea and Milk. I used css (or style="visibility: hidden"), but it still occupies some space.

=======

Note: the first li is just some template used to create the other li items. The template li is generated during the run time, and that's why I need to hide it. I remove it eventually after generating the other li items (Tea and Milk), but before I generate Tea and Milk, Coffee is still visible.

============

Thanks. Answer is style="display:none"

Answer 1

Create a class and apply it to elements which you wish to hide. You can do it when you generate markup or add the class to each element using a selector, like jquery

.hide{
  display:none;  
}

<ul>
  <li class="hide">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>