How to hide all elements in a HTML page using jQuery?

In this example, I am going to show you how to hide all HTML elements present in a HTML page using jQuery.

As we know jQuery has so many in built functions to easily select or change DOM elements with minimal coding effort.

To hide all DOM elements, I am gonna use one such function out of existing jQuery functions called hide.

To select all DOM elements, we need to use ALL selector usually specified by the symbol “*” (Asterisk).

Enough talking let us dive into coding.


Here is the HTML code (main.html):

  <title>How to hide all HTML elements using jQuery</title>
  <script src=""></script>
  <script type="text/javascript">
   function func1(){ 
   This example illustrates how to hide all HTML (DOM) elements using jquery. Please click the below button to hide entire Page.
   Here you go:
   <button onclick="func1()">Click me to hide all HTML elements</button>

Execute the code


You can download the source code right from below and explore.

Download Source Code

Author: Udhay

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *