时间戳

首页 > 解决方案 > 当自定义元素没有值时，CSS 隐藏祖父 div 和所有子元素

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

问题描述

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

这是一个 HTML 示例，当元素“lightning-formatted-text”为空时，我想用类 ="slds-col slds-grid slds-size_12-of-12" 隐藏祖父 div 并将其保留在原位当一个值在该元素中时：

<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 的以下部分确实允许它工作。我已经在 J​​Sfiddle 中进行了测试，方法是删除它并向具有某些值的“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 解决方案是什么？

先感谢您！

标签： javascripthtmlcsssalesforce

解决方案

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()
    }
})

推荐阅读