Скачать или смотреть How to Hide a Grandparent Div and Child Elements Using CSS and JavaScript

Learn how to effectively `hide a grandparent div` and all its child elements when a specific custom element is empty, utilizing CSS and JavaScript for your Salesforce Community projects.
---
This video is based on the question https://stackoverflow.com/q/64594377/ asked by the user 'DW1' ( https://stackoverflow.com/u/6654461/ ) and on the answer https://stackoverflow.com/a/64594701/ provided by the user 'noshad b.e' ( https://stackoverflow.com/u/7426229/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: CSS hide grandparent div and all child elements when a custom element has no value

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Hiding a Grandparent Div in CSS Using JavaScript and jQuery

In web development, there are times when you need to control the visibility of a parent element based on the state of its child elements. This is particularly relevant when working with custom components in platforms like Salesforce. In this article, we’ll explore how to hide a grandparent <div> and all its child elements when a custom element, such as a <lightning-formatted-text>, has no value.

The Challenge

You may encounter a scenario where you are unable to alter the HTML structure directly (as in the case of Salesforce). Instead, the only options available to you are modifying the CSS and JavaScript.

The goal is to hide the grandparent <div> with specific classes when the <lightning-formatted-text> element inside it is empty. Here’s the key HTML structure we’re working with:

[[See Video to Reveal this Text or Code Snippet]]

Understanding the Limitations of CSS

Unfortunately, CSS cannot modify parent elements based on the state of child elements. Thus, while you may try to use selectors like :empty, it simply won’t work for our requirement.

Example of an attempt that won’t succeed:

[[See Video to Reveal this Text or Code Snippet]]

This approach will not hide the grandparent <div> effectively—for similar reasons, we have to rely on JavaScript or jQuery to achieve our goal.

Solution Using JavaScript/jQuery

To accomplish hiding the grandparent div when its child <lightning-formatted-text> is empty, you can leverage jQuery. Here’s a straightforward snippet that does just that:

[[See Video to Reveal this Text or Code Snippet]]

Step-by-Step Breakdown

Select the Custom Element: The script uses $('lightning-formatted-text') to find all instances of this element.

Loop Through Each Instance: Using each(), you can perform operations on every occurrence of the selected element.

Check for Emptiness: The condition $(this).is(':empty') || $(this).html(' ') verifies if the element is empty or contains only whitespace.

Hide Grandparent: If the condition is true, $(this).parents('.slds-col.slds-grid.slds-size_12-of-12').hide() is called to hide the grandparent.

Conclusion

By utilizing jQuery, we can successfully control the visibility of a grandparent <div> based on the presence of content within its child elements. This approach is especially useful in environments with predefined HTML structures, such as Salesforce Community templates.

Feel free to adapt the JavaScript code to meet your specific needs, and happy coding!