I would like to hide my outer div if inner div is empty

Question

I have two div a child and a parent. the child contains a contact number. If there is no contact number I want the parent div to display none. I am trying to use the :empty CSS statement but I think I am using the wrong logic.

#inter #inter-content:empty {
    display:none;
}

<div id="inter" class="telephone">Intl: <div id="inter-content">{{contact_number_international}}</div></div>

I'm not sure if CSS is the right route either. I have tried using the bottom as well:

#inter + #inter-content:empty {
    display:none;
}

Murphey

Answer 1

You cant do this in the way you are approaching it due to how CSS works, and that you can only write selectors to isolate child/subsequent DOM nodes. :empty also works on selecting elements with no child nodes (elements or text).

The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered.

As such, you cannot select a parent element using CSS- and you cannot determine a node to be empty, if it contains another node (whether that node is empty or not).

One way to potentially get around this, is to apply the label in your code as a pseudo element, with its content conditionally sourced from a (data) attribute if the element is not empty. This will give the impression of the parent not displaying content if no number is present.

That said, if you actually dont want to display the parent at all- you will run into trouble using CSS alone. It looks like you are using angular (or similar), in which case you may want to use a logical check to toggle the parent's visibility.

.inter div:not(:empty):before {
  display: block;
  content: attr(data-label);
}

<div class="inter" class="telephone">
  <div data-label="Intl: ">21342213</div>
</div>

<div class="inter" class="telephone">
  <div data-label="Intl: "></div>
</div>

Intractable

This is absolutely brilliant! thank you so much for this. But for some reason it hides all the data-labels on my page. – Murphey

I will mark this as the answer because it did answer my question correctly. I just asked my question incorrectly. Thank you so much this really is brilliant. you actually tought me alot today – Murphey

Answer 2

If you are using for example angular you could write

<div id="inter" class="telephone" ng-if="contact_number_international != null">
    <div id="inter-content">Intl: {{contact_number_international}}</div>
</div>

Other frameworks should have such functions too. (I assume u use something because of "{{}}")

Barbrabarbuda

nb. != null is not required for the ng-if check – Intractable

Answer 3

Fast forward a few years and CSS has a solution for this:

.outer-content:has(.inner-content:empty) { display: none; }

I was searching myself and none of the relevant answers were recently updated so I thought I'd write it down here.

The browser support :has to be considered of course

Dynamo

Answer 4

"Hide an empty container" questions are redirected here. So here's the simplest solution:

.hide-if-empty:empty { display: none !important;  }

<div class="hide-if-empty"><!-- if empty then hidden --><div>

Note the element is not considered empty if it contains whitespace.

Achromatin

Answer 5

If the parent element might have several children, and you want to hide it only, if none of its children has any content, you might consider this reverse logic:

@supports(selector(:has(p))) {
  .parent {
    display: none;
  }
  .parent:has(:not(:empty)) {
    display: inherit;
  } 
}

(But make sure the browser can reveal it before you hide.)

Backstop