Search code examples
javascripthtmlcssstenciljs

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

   <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:

Inside 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.

Solution
    • 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