当自定义元素没有值时，CSS会隐藏祖父母div和所有子元素

Question

当祖父母div中的自定义元素为空时，我试图隐藏祖父母div及其所有子元素。不幸的是，我无法直接控制HTML，因为它是建立在Salesforce社区上的，该社区强制以某种方式创建HTML。然而，我可以编辑CSS和JS来实现这一点。

这里有一个HTML的例子，我想用class＝"隐藏祖父母div；slds列slds栅格slds-size_12-of12"；当元素"；闪电格式文本"；为空，当值在该元素中时将其保留在适当位置：

<div c-contactinformation_contactinformation="" class="slds-col slds-grid slds-size_12-of-12">
<div c-contactinformation_contactinformation="" class="slds-border_bottom slds-clearfix">
<div c-referralcontactinformation_referralcontactinformation="" class="slds-float--left">
<lightning-output-field c-contactinformation_contactinformation="" class="slds-form-element slds-form-element_stacked" lightning-outputfield_outputfield-host=""><span lightning-outputfield_outputfield="" class="slds-form-element__label">Last Name</span>
<div lightning-outputfield_outputfield="" class="slds-form-element__control">
<lightning-formatted-text lightning-outputfield_outputfield="" class="slds-form-element__static">testLastName</lightning-formatted-text>
<slot lightning-outputfield_outputfield=""></slot>
</div>
</lightning-output-field>
</div>
</div>
</div>

我尝试了很多这种CSS的变体，但当元素为空时，收效甚微：

.slds-col.slds-grid.slds-size_12-of-12 lightning-formatted-text:not(:empty):before {
display: block;
}

我注意到的是，删除HTML的以下部分确实可以实现这一点。我在JSfiddle中进行了测试，删除了这个并添加了一个"；数据标签"；到"；闪电格式文本"；元素，并加上"；content:attr(数据标签("到上方的CSS

<lightning-output-field c-contactinformation_contactinformation="" class="slds-form-element slds-form-element_stacked" lightning-outputfield_outputfield-host=""><span lightning-outputfield_outputfield="" class="slds-form-element__label">Last Name</span>
</lightning-output-field>

任何关于CSS解决方案的想法都可以让它与自定义元素"一起工作；闪电输出场"；以及HTML中它之后的跨度？如果这不能在CSS中完成，JS解决方案会是什么？

提前谢谢！

Answer 1

css中没有办法从子对象影响父对象在jQuery/js中，您可以执行以下操作：

$('lightning-formatted-text').each(function(){
if($(this).is(':empty') || $(this).html(' ')){
$(this).parents('.slds-col.slds-grid.slds-size_12-of-12').hide()
// or $(this).parents('.slds-col.slds-grid.slds-size_12-of-12').remove()
}
})