CODEWITHSUNDEEP
javascripthtmlcssdom
Sheppard25
Sheppard25

Reputation: 598

Display:none and DOM

if display: none removes element from the DOM, why I am able to see it in dev-tools inspector or access via document.getElementBy? It should be somehow one way road. If we removes element via display: none, it should not be present anywhere. How should I understand "removing from DOM"?

Upvotes: 1

Views: 2967

Answers (3)

I_love_vegetables
I_love_vegetables

Reputation: 1341

display:none does not remove the element from the DOM, it only hides the element but it will still be there

you need to use the remove method in javascript like this yourElement.remove(); to actually remove it from the DOM

Upvotes: 1

Rounin
Rounin

Reputation: 29463

If you actually want to remove an element from the DOM, you can use Javascript:

myElementParent.removeChild(myElement);

or:

myElement.remove();

Further Reading:

But, in CSS, the following property-value pairs:

  • display: none;
  • visibility: hidden;
  • opacity: 0; pointer-events: none;

all represent approaches to remove visibility and interactivity from an element which remains in the DOM.

The key difference between the first of these and the latter two is that display: none; also removes the space that would otherwise be occupied by the element.

Upvotes: 1

Quentin
Quentin

Reputation: 943579

if display: none removes element from the DOM

It doesn't. It causes it to render as if it were not in the DOM.

From MDN:

Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.

Upvotes: 4

Related Questions