Hide HTML Element(s) using jQuery
Selected some HTML elements in the document, hide them using jQuery.
Solution
To hide selected HTML elements using jQuery, call hide() function on the selected elements.
For example, the syntax to hide all paragraphs in the document is
$("p").hide();Programs
1. Hide all paragraphs in the document.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
function myAction() {
$("p").hide();
}
</script>
</head>
<body>
<button onclick="myAction()">Hide all paragraphs</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<br>
<a href="#">A dummy link</a>
</body>
</html>2. Hide all link elements in the document.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
function myAction() {
$("a").hide();
}
</script>
</head>
<body>
<button onclick="myAction()">Hide all links</button>
<p>Welcome to <a href="#jquery">jQuery</a></p>
<p>Welcome to <a href="#jquery">jQuery 3</a></p>
</body>
</html>