Why is the element in the DOM despite being display: none?

Question

   <div class='ifx__alert-icon-wrapper'>
        <ifx-icon icon={this.icon}></ifx-icon>
   </div>

&__alert-icon-wrapper {
    display: none;
    &.show { 
      position: relative;
      min-width: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

DOM:

Why is the ifx__alert-icon-wrapper element inside the DOM despite being display: none?

I am positive that the show class is not added.

`display: none` doesn't remove an element from the DOM, it just hides the element from the view. If you want to remove an element, see https://developer.mozilla.org/en-US/docs/Web/API/Element/remove — Teemu, Feb 20 '23 at 11:00
@IloveCoffee the first comment answered to any doubt shown in the question and nothing was added in the answer that you accepted. The question alone wouldn't exist at all if you _"knew that"_. Please don't challenge people that put efforts answering your questions and read carefully what they suggested before replying — Diego D, Feb 20 '23 at 12:18

score 2 · Accepted Answer · edited Mar 03 '23 at 23:33

display: none removes content in the element when applied to the element.
display: none does not remove it from the code or make it so that it can not be seen in inspect element.
display: none can be added anywhere to remove its appearance.

The MDN docs about display and information about display none can be found there information about display: none. If you are looking to remove the element you will need JavaScript using remove(). You will need to get the element

const element = document.getElementById('your_element');

and you will need to do this too.

element.remove();

you need to assign a variable to the element you want to remove then you need to use remove with the elements name as seen above

Why is the element in the DOM despite being display: none?

1 Answers1