How To Hide Element In Jquery By Id

by

In this blog post, we will learn how to hide a specific element in a web page using jQuery by targeting its ID. jQuery is a popular and powerful JavaScript library that simplifies HTML manipulation, event handling, and animation.

Prerequisites

Before getting started, make sure you have the following installed and set up:

  • jQuery library: Download the latest version of jQuery from here or include it directly in your HTML file using the CDN link.

Step 1: Include the jQuery library

First, include the jQuery library in your HTML file. You can either download the library and include it from your local file system or use a CDN link. If you want to use the CDN link, add the following line in the <head> section of your HTML file: 

    &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;

Step 2: Create an element with a unique ID

Now, create an HTML element with a unique ID that you want to hide. For example, let’s create a <div> element with the ID “myElement”: 

    &lt;div id="myElement"&gt;This is the element we want to hide.&lt;/div&gt;

Step 3: Hide the element using jQuery

To hide the element with jQuery, we can use the .hide() method. First, we need to select the element by its ID using the $(‘#elementID’) selector, and then we can call the .hide() method on the selected element. Here’s an example: 

    $(document).ready(function(){
        $('#myElement').hide();
    });

This code snippet should be placed inside a <script> tag in your HTML file, preferably at the end of the <body> section. The $(document).ready() function ensures that the code is executed only after the entire DOM is loaded.

Conclusion

Now you know how to hide an element in jQuery by targeting its ID. This technique can be useful when you want to dynamically show or hide certain elements on your webpage based on user interaction or other conditions. Remember that you can also use the .show() method to reveal a hidden element if needed.