title: How to hide a <li> item in html and make it not occupy any space?
body: <p>I have an html list like this:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Coffee&lt;/li&gt;
    &lt;li&gt;Tea&lt;/li&gt;
    &lt;li&gt;Milk&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>=======</p>
  
  <p>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.</p>
  
  <p>============</p>
  
  <p><strong>Thanks. Answer is style="display:none"</strong></p>