Hi I wanted to know what the effect of applying display:none to an element is. Does it remove it from the DOM or just from the document flow? What does removing an element from the document flow implies? I know that visibility: hidden just hides the element, but it still affects the document flow and that you can remove an element from the DOM using the remove() js method.
Asked
Active
Viewed 2,107 times
3
FRANCISCO BERNAD
- 473
- 4
- 15
-
1Does this answer your question? [What is the difference between visibility:hidden and display:none?](https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) – Praneet Dixit Dec 14 '20 at 06:34
2 Answers
2
display: none; will just hide the element, but all the listener events will still be there. It won't be removed from the DOM.
But the difference between visibility: hidden and display: none is that, in first case, the tag and content inside will be rendered, whereas in second case the tag won't be rendered.
visibility: hidden;
div tag is rendered and affecting document flow
display: none;
div not rendered
Pushkin
- 3,336
- 1
- 17
- 30
-
-
@jqueryHtmlCSS, as can plain old javascript. What CSS can't do is change the DOM, only how it is represented. – Jon P Dec 14 '20 at 01:44
-
@Pushkin So whats the difference with visibility:hidden, does it not hide the element aswell? – FRANCISCO BERNAD Dec 14 '20 at 01:46
-
1@FRANCISCOBERNAD, in both case, it will be hidden, unlike `display: none`, the element will be rendered in `visibility: hidden` – Pushkin Dec 14 '20 at 01:47
2
Using display:none; will make the element disappear, like it has never been there, visibility: hidden; will hide it only, making it kinda transparent and it will disturb document flow
Ranieri
- 66
- 4