CSS 在自定义元素没有值时隐藏祖父 div 和所有 child 元素

Question

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

这是一个 HTML 的示例，我想用 class =slds-col slds-grid [=35= 隐藏祖父母 div ]" 当元素 "lightning-formatted-text" 为空时，当该元素中有值时将其保留在原位：

<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 中进行了测试，方法是删除它并向具有某些值的“lightning-formatted-text”元素添加“data-label”并添加“content: attr(data-label);”到上面的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 解决方案的想法，可以让它与自定义元素“lightning-output-field”以及 HTML 中它之后的跨度一起工作吗？如果这不能在 CSS 中完成，那么 JS 解决方案是什么？

提前致谢！

Answer 1

css 无法影响 child 的 parents 在 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()
    }
})

CSS 在自定义元素没有值时隐藏祖父 div 和所有 child 元素

CSS hide grandparent div and all child elements when a custom element has no value

html

javascript

css

salesforce