Блог

Я пытаюсь скрыть дедушкин div и все его дочерние элементы, когда пользовательский элемент в дедушкином div пуст. У меня есть HTML, которым я, к сожалению, не могу управлять напрямую, поскольку он основан на сообществе Salesforce, которое заставляет HTML создаваться определенным образом. Однако я могу отредактировать CSS и JS для достижения этой цели.

Вот пример HTML, в котором я хочу скрыть дедушкин div с помощью class =»slds-col slds-grid slds-size_12-of-12″, когда элемент «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» с некоторым значением и добавив «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?

Заранее спасибо!

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