How to hide an HTML element by ID with JavaScript?

Sometimes, we want to hide an HTML element by ID with JavaScript.

In this article, we’ll look at how to hide an HTML element by ID with JavaScript.

How to hide an HTML element by ID with JavaScript?

To hide an HTML element by ID with JavaScript, we can set the style.display property to 'none' or the style.visibility property to 'hidden'.

For instance, we write:

<div class="nav">
  <ul>
    <li>
      <a id="nav-ask" href="/questions/ask">
        Ask Question
      </a>
    </li>
  </ul>
</div>

to add some elements.

Then we can hide the a element by writing:

const link = document.getElementById('nav-ask');
link.style.display = 'none';

or

const link = document.getElementById('nav-ask');
link.style.visibility = 'hidden';

Conclusion

To hide an HTML element by ID with JavaScript, we can set the style.display property to 'none' or the style.visibility property to 'hidden'.