Hiding html elements with javascript

Hiding / removing elements in DOM using JavaScript

This post is 4 years old. (Or older!) Code samples may not work, screenshots may be missing and links could be broken. Although some of the content may be relevant please take it with a pinch of salt.

In this article, we’ll take a look at how to hide and remove elements in DOM by using JavaScript, and we’ll learn a few techniques and explain the differences between them.

For this article, we’ll assume a straightforward HTML page:

DOCTYPE html>

html lang="en"> 
head> 
meta charset="utf-8" /> 
link rel="stylesheet" href="app.css" /> 
title>Hide elements in DOM using JavaScripttitle> 
head>
 
body> 
main id="main"> 
div class="first"> 
p>First code>divcode> elementp> 
div> 
div class="second"> 
p>Second code>divcode> elementp> 
div> 
main>
 
footer> 
button id="hideFirst">Hide first divbutton> 
button id="showFirst">Show first divbutton> 
footer>
 
script src="app.js"> script> 
body>
html>

We have two elements and two elements that will show and hide the first out of the two s on the page.

The s deliberately have different backgrounds as the example needs to be visual to make a point.

We’ll discuss four ways to remove elements using JavaScript from the DOM.

visibility: hidden

One of the most straightforward ways to hide an element would be to use the CSS property visibility and set its value to hidden . Here’s the entire JavaScript code that we’d be using:

const firstDiv = document.querySelector('.first');
const btnHide = document.getElementById('hideFirst');
const btnShow = document.getElementById('showFirst');

btnHide.addEventListener('click', () =>  
firstDiv.style.visibility = 'hidden';
>);

btnShow.addEventListener('click', () =>  
firstDiv.style.visibility = '';
>);

If we run this example, we’ll notice that the space where the first element was is still taking up screen estate. This is because the element is still part of the DOM tree — it’s merely been hidden by a CSS style property, but we haven’t effectively removed it from the DOM.

If we’d like to place the element back, all we need to do is to set its visibility property to nothing.

style.display

The next way to hide an element from the DOM is to use the display style property. Just like before this will not remove the element from the DOM tree, but it’ll add a CSS style property. However, this time, the element is no longer going to take up space and the second element will move to its place:

const firstDiv = document.querySelector('.first');
const btnHide = document.getElementById('hideFirst');
const btnShow = document.getElementById('showFirst');

btnHide.addEventListener('click', () =>  
firstDiv.style.display = 'none';
>);

btnShow.addEventListener('click', () =>  
firstDiv.style.display = 'block';
>);

Using the hidden attribute

We can also hide elements using the hidden attribute. This property expects a boolean value.

const firstDiv = document.querySelector('.first');
const btnHide = document.getElementById('hideFirst');
const btnShow = document.getElementById('showFirst');

btnHide.addEventListener('click', () =>  
firstDiv.hidden = true;
>);

btnShow.addEventListener('click', () =>  
firstDiv.hidden = false;
>);

Notice, that again the remains in the DOM tree but it doesn’t take up space and the second element moves into its place. If we check the properties of the first element, we’ll see that a new style has been added with this value:

Please note that adding a display CSS property with any other value than none will display the element regardless of whether the HTML attribute hidden is present or not.

.remove()

Hiding — or in this case, actually removing an element from the DOM is possible by calling the .remove() method. This is the first option that we are discussing that will remove the element entirely from the DOM tree:

const firstDiv = document.querySelector('.first');
const btnHide = document.getElementById('hideFirst');
const btnShow = document.getElementById('showFirst');

btnHide.addEventListener('click', () =>  
firstDiv.remove();
>);

btnShow.addEventListener('click', () =>  
if (!document.querySelector('.first'))  
const div = document.createElement('div'); 
div.classList.add('first'); 
const paragraph = document.createElement('p'); 
paragraph.innerHTML = 'First div element'; 
div.appendChild(paragraph); 
const main = document.getElementById('main'); 
main.insertBefore(div, main.firstChild); 
>
>);

Using this method will have some repercussions: since the element is now completely removed from the DOM tree, there’s no easy way to put it back. The button to add back the is now a lot more complex — this is due to the fact that the element needs to be constructed from scratch.

Now, we could have done something a lot easier, but this could be a bit more dangerous. In the first part of the code we captured the value of the first element, so we can

btnShow.addEventListener('click', () =>  
if (!document.querySelector('.first'))  
const main = document.getElementById('main'); 
main.insertBefore(firstDiv, main.firstChild); 
>
>);

Be careful though, we are using a simple codebase here, in a more complex application we may not be able to reconstruct the element quickly.

Styling an element

Completely removing an element from the DOM means that all event listeners and styles that were dynamically added to the element are completely wiped out as well. We can very easily test this by adding yet another button to our HTML page:

button id="addSytle">Add stylebutton>

And add some additional code as well that is going to be responsible for adding a style to the first element dynamically:

const btnAddStyle = document.getElementById('addSytle');
btnAddStyle.addEventListener('click', () =>  
firstDiv.style.color = 'black';
>);

Now if we use the first way, where we manually reconstructed the element, of course, the styling will be lost. If we use the second way, the styling is still going to be applied when we add back the element.

Conclusion

In this article, we discussed a few ways to hide and remove elements from the DOM using JavaScript. Use the one that is suitable for your project, but please be wary of some of the drawbacks.

© Copyright Tamas Piros, 2023. All rights reserved.

Источник

How to hide HTML element with JavaScript?

In this tutorial, we will learn how to hide HTML element with JavaScript.

Hiding an HTML element can be performed in different ways in JavaScript. In this tutorial, we will see the three most popular ways of doing it −

1. Using the hidden property
2. Using the style.display property
3. Using the style.visibility property

Generally, we use the hidden attribute to hide a particular element. We can toggle between hiding and showing the element by setting the hidden attribute value to true or false, respectively.

In the other two ways, we use the style object of the element. We have two properties in the style object to hide the HTML element, one is the display, and another one is the visibility.

In JavaScript, we can use both of these properties to hide the HTML elements, but the main difference between these two is when we use style.visibility property, then the specific tag is not visible, but the space of the tag is still allocated. Whereas in style.display property, not only is the tag hidden but also there is no space allocated to that element.

Using the hidden property

In JavaScript, the hidden property of an element is used to hide an element. We set the hidden properties value to true to hide the element.

Syntax

Following is the syntax to use hidden property −

document.getElementById('element').hidden = true

In the above syntax, ‘element’ is the id of an HTML element, and by using document.getElementById method, we are accessing the element and changing its hidden property to true to hide the element.

Example

In the below example, we have used the hidden property to hide a div element using JavaScript.

html> body> div id="dip"> Click the below buttons to hide or show this text. /div>br> button onclick="hide()"> Hide Element /button> button onclick="show()"> Show Element /button> script> function hide()  document.getElementById('dip').hidden = true > function show()  document.getElementById('dip').hidden = false > /script> /body> /html> 
 

Using the style.display property

In JavaScript, style.display property is also used to hide the HTML element. It can have values like ‘block,’ ‘inline,’ ‘inline-block,’ etc., but the value used to hide an element is ‘none.’ Using JavaScript, we set the style.display property value to ‘none’ to hide html element.

Syntax

Following is the syntax to hide HTML elements using style.display property in JavaScript.

document.getElementById('element').style.display = 'none'

In the above syntax, ‘element’ is the id of an HTML element, and by using document.getElementById method, we are accessing the element and changing its style.display property to ‘none’ to hide the element.

Example

In the below example, we have used the style.display property to hide a div element using JavaScript.

html> style> #myDIV  width: 630px; height: 300px; background-color: #F3F3F3; > /style> body> p> Click the "Hide Element" button to hide the div element. /p> button onclick="hide()"> Hide Element /button> div id="myDIV"> Hello World! This is DIV element /div> script> function hide()  document.getElementById('myDIV').style.display = 'none' > /script> /body> /html> 
 

Using the style.visibility property

In JavaScript, style.visibility property is also used to hide the HTML element. It can have values like ‘visible,’ ‘collapse,’ ‘hidden’, ‘initial’ etc., but the value used to hide an element is ‘hidden’. Using JavaScript, we set the style.visibility property value to ‘hidden’ to hide html element.

Syntax

Following is the syntax to hide HTML elements using style.visibility property in JavaScript −

document.getElementById('element').style.visibility = 'hidden'

In the above syntax, ‘element’ is the id of an HTML element, and by using document.getElementById method, we are accessing the element and changing its style.visibility property to ‘hidden’ to hide the element.

Example

In the below example, we have used the style.visibility property to hide element using JavaScript.

html> style> #dip  width: 630px; height: 300px; background-color: #F3F3F3; > /style> body> p> Click the "Hide Element" button to hide the div element. /p> button onclick="hide()"> Hide Element /button> button onclick="show()"> Show Element /button> div id="dip"> Hello World! This is DIV element /div> script> function hide()  document.getElementById('dip').style.visibility = 'hidden'; > function show()  document.getElementById('dip').style.visibility = 'visible'; > /script> /body> /html> 
 

In the above output, users can see the element is hidden using style.visibility property, but the element still occupies its space in the browser.

In this tutorial, we learned three ways to hide an element using JavaScript. The first approach was to use the hidden property of an element. The next was to set style.display property to ‘hidden’. The third method was to set style.visibility property to ‘hidden’.

Источник