You can use the getElementsByClassName() or querySelectorAll() selector to hide an element by class using JavaScript. Specific steps will be introduced in this article.
Hide an element by class using JavaScript
During application development, you will encounter many problems that require hiding an HTML element.
This article will give two methods to the requirement of hiding an element by class using JavaScript with appropriate examples.
Use the getElementsByClassName() selector
In the first method, we use the getElementsByClassName() selector. This selector will select elements by class.
Then using indexing will get us the desired element.
Next step, we’ll access the visibility property. Here, we use style.visibility on the elements and set its value to 'hidden'.
Example:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="learn">
<h1>LearnShareIT</h1>
</div>
<br>
<button onClick="hideBox()">HIDE</button>
<script src="script.js"></script>
</body>
</html>function hideBox() {
document.getElementsByClassName('learn')[0].style.visibility = 'hidden';
}Output:
In the above code we use getElementsByClassName() selector to select the element with class name 'learn' and index '0', then we use style.visibility attribute on selected elements to set it to 'hidden' value.
After running the program and pressing the HIDE button, we will hide the words “LearnShareIT”.
Use querySelectorAll() selector
The querySelectorAll() selector is used to select elements of a particular class. Then using indexing will get us the desired element.
Next step, we’ll access the visibility property. Here, we use style.visibility attribute on the elements and set its value to 'hidden'.
Example:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="learn">
<h1>LearnShareIT</h1>
</div>
<br>
<button onClick="hideBox()">HIDE</button>
<script src="script.js"></script>
</body>
</html>function hideBox() {
document.querySelectorAll('.learn')[0].style.visibility = 'hidden';
}Output:
In the above code, we use querySelectorAll() selector to select the element with class name 'learn' and index '0', then we use style.visibility attribute on selected elements to set it to 'hidden' value.
After running the program and pressing the HIDE button, we will hide the words “LearnShareIT”.
Summary
This article has shown how to hide an element by class using JavaScript. I hope the information in this article will be helpful to you. If you have any problems, please comment below. I will answer as possible. Thank you for reading!
Maybe you are interested:
- Set the “required” Attribute using JavaScript
- Get Elements by multiple Class Names in JavaScript
- Add an ID attribute to an Element using JavaScript
Hello, my name’s Bruce Warren. You can call me Bruce. I’m interested in programming languages, so I am here to share my knowledge of programming languages with you, especially knowledge of C, C++, Java, JS, PHP.
Name of the university: KMA
Major: ATTT
Programming Languages: C, C++, Java, JS, PHP
