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

html hidden
Simo picture Simo · Sep 24, 2015 · Viewed 92.2k times · Source

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

Vu Nguyen picture Vu Nguyen · Sep 25, 2015

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>

Related questions

How to get current formatted date dd/mm/yyyy in Javascript and append it to an input

I would like to add a current date to a hidden HTML tag so that it can be sent to the server: <input type="hidden" id="DATE" name="DATE" value="WOULD_LIKE_TO_ADD_DATE_HERE"> How can …

Read More
How do you create a hidden div that doesn't create a line break or horizontal space?

I want to have a hidden checkbox that doesn't take up any space on the screen. If I have this: <div id="divCheckbox" style="visibility: hidden"> I don't see the checkbox, but it still creates a new line. …

Read More
Hidden property of a button in HTML

I am trying to show three buttons on one button click. Before a button click all three buttons are hidden. I set the hidden property and I am also calling a function on a button click. The problem is that …

Read More