Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to add display:none in an HTML element using jQuery?
To work with display: none in an HTML element using jQuery, you can use the hide() method. This method applies the CSS property display: none to the selected elements, effectively hiding them from view.
The jQuery hide() method is a convenient way to hide elements without manually setting CSS properties. It's part of jQuery's animation and effects methods.
Example
You can try to run the following code to learn how to add display:none in an HTML element ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").removeAttr("style").hide();
});
});
</script>
</head>
<body>
<h1>Heading 1</h1>
<p style="font-size:15px">This is demo text. This will hide on button click.</p>
<p>This is another text. This will hide on button click.</p>
<button>Hide</button>
</body>
</html>
In this example ?
- The
$(document).ready()ensures the code runs after the DOM is fully loaded - When the button is clicked, all
<p>elements first have their inline styles removed usingremoveAttr("style") - Then the
hide()method is applied, which setsdisplay: noneon all paragraph elements
Alternative Method
You can also directly set the CSS property using the css() method ?
$("p").css("display", "none");
Conclusion
The jQuery hide() method is the most convenient way to apply display: none to HTML elements. It provides a clean, readable solution for hiding elements dynamically.
Updated on: 2026-03-13T19:25:07+05:30
4K+ Views
Advertisements