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

Question

I am trying to hide the grandparent div and all of its child elements when a custom element in the grandparent div is empty. I have HTML that I unfortunately cannot control directly as this is built on a Salesforce Community which forces HTML to be created in a certain way. However, I can edit the CSS and JS to achieve this.

Here's an example of the HTML where I want to hide the grandparent div with the class ="slds-col slds-grid slds-size_12-of-12" when the element "lightning-formatted-text" is empty and leave it in place when a value is in that element:

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

I have tried a lot of varieties of this CSS with little success when that element is empty:

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

What I've noticed is removing the below part of the HTML does allow this to work. I've tested in JSfiddle by removing this and adding a "data-label" to the "lightning-formatted-text" element with some value and adding "content: attr(data-label);" to the CSS above

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

Any ideas on a CSS solution to letting this work with that custom element "lightning-output-field" and the span after it in the HTML? If this cant be done in CSS, what would a JS solution be?

Thank you in advance!

noshad b.e noshad b.e · Accepted Answer · 2020-10-29T15:55:24

there is no way in css to affect parents from child in jQuery/js you can do this:

$('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 hide grandparent div and all child elements when a custom element has no value

1 Answers