Panorama Média Global

Question

Is it possible to hide a parent element, if its child is empty? I know there is the :empty selector, but it only works, if the parent doesn't contain anything, including HTML elements.

This is my HTML:

<div class="row">
    <div class="center">
        <span class="text-danger label-promotion"><strong></strong></span>
    </div>
</div>

And my CSS, which sadly doesn't work this way, but I think you get what I'm trying to do:

.label-promotion:empty {
    display: none;
}

I want the  not to appear if is empty and I'd like to avoid JS for this. Is that possible?

Accepted Answer

If the child of .label-promotion will always be a , you can do:

.label-promotion strong:empty {
    display: none;
}

to hide the . However, you can not hide the  itself with CSS. See this answer to a similar question: I would like to hide my outer div if inner div is empty

Answer 2

I'd like to avoid JS for this

Yes, I agree, it's always better to have a pure CSS solution.

But in this instance all you need to do is:

find all the .label-promotion <spans>
loop through them, checking if each has an empty 
if it does, add to the  the class .is-empty

Working Example:

// Find all the .label-promotion <spans>
const labelPromotions = document.querySelectorAll('.label-promotion');

// Loop through them... 
for (labelPromotion of labelPromotions) {

  let strong = labelPromotion.getElementsByTagName('strong')[0];
  
  // ... checking if each has an empty <strong> 
  if (strong.textContent === '') {
    
    // If it does, add to to the <span> the class .is-empty
    labelPromotion.classList.add('is-empty');
  }
}

span {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border: 1px solid rgb(255, 0, 0);
  vertical-align: middle;
}

.is-empty {
  display: none;
}

<span class="text-danger label-promotion"><strong>A</strong></span>
<span class="text-danger label-promotion"><strong></strong></span>
<span class="text-danger label-promotion"><strong>C</strong></span>
<span class="text-danger label-promotion"><strong>D</strong></span>
<span class="text-danger label-promotion"><strong></strong></span>
<span class="text-danger label-promotion"><strong></strong></span>
<span class="text-danger label-promotion"><strong>G</strong></span>

Panorama Média Global

Css - Hide Element If Child Is Empty [Duplicate]

2 Answers

Alexander Ross