0

I want to hide the parent element of the element 'child'. It will be better. Do anyone know to do this with pure css. If there is no way to do so.. JavaScript is also Ok for me

Code

<h2>
  <span id="child">
  Lorem Ipsum
  </span>
</h2>
  • You cannot do this with pure CSS. CSS **by design** (for reasons I won't get into) does not have a "parent-of" or "ancestor-of" selector. – Dai Jul 03 '20 at 07:34
  • Try `document.querySelector('#child').parentNode` – User863 Jul 03 '20 at 07:35
  • So do you mean, make the parent disappear, but not the child? As far as I am aware, if you get hide the parent, the child will disappear, so if that's what you mean, we will need to find some way around it. – corn on the cob Jul 03 '20 at 07:36

2 Answers2

0
document.addEventListener( 'DOMContentLoaded', function() {
    for( const el of document.querySelectorAll( '.child' ) ) {
        const ancestorH2 = el.closest( 'h2' );
        if( ancestorH2 ) ancestorH2.style.display = 'none';
    }
} );
Dai
  • 141,631
  • 28
  • 261
  • 374
0

Maybe something like this in js?

  var x = document.getElementById("child").parentElement;
  x.style.display = 'none';

https://jsfiddle.net/49otfmgw/

Corest
  • 19
  • 3