如果内部div为空，我想隐藏我的外部div [英] I would like to hide my outer div if inner div is empty

问题描述

我有两个div，一个孩子和一个父母.该孩子包含一个联系电话.如果没有联系电话，我希望父div不显示任何联系人.我正在尝试使用:empty css语句，但是我认为我使用了错误的逻辑.

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>

请帮助.我不确定CSS是否是正确的路线.我也尝试过使用底部

Please help. Im not sure if CSS is the right route either. I have tried using the bottom aswell

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

推荐答案

由于CSS的工作方式，您无法以接近它的方式执行此操作，并且只能编写选择器来隔离子/后续DOM节点. :empty 也适用于选择没有子节点的元素(元素或文本).

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

:empty 伪类表示在以下位置没有子元素的任何元素全部.仅元素节点和文本(包括空格)是考虑过的.

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

这样，您不能使用CSS-选择父元素，也不能确定一个节点是否为空，如果该节点包含另一个节点(该节点是否为空).

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

一种可能解决此问题的方法是，将标签中的标签作为伪元素应用，如果元素不为空，则其内容有条件地来自(data)属性.如果没有数字，这将给父母留下不显示内容的印象.

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.

也就是说，如果您实际上根本不想显示父级，那么仅使用CSS就会遇到麻烦.看起来您正在使用角度(或类似角度)，在这种情况下，您可能需要使用逻辑检查来切换父级的可见性.

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>

这篇关于如果内部div为空，我想隐藏我的外部div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！