Dynamic Options: Can we hide parent element only if dynamic child is empty?

Hi Beaniie,

One approach I can think of to achieve this is through Javascript.

For instance, I have a setup like this where the parent container has a custom class remove-if-empty, and the tag dynamic Headline Block has a custom class check-empty.

See: https://share.getcloudapp.com/geumJy7v

Also see: https://share.getcloudapp.com/DOu4wrEj

Then, I added this Javascript through a Hook Element with Hook wp_footer:

<script>
var parentContainer = document.querySelector(".remove-if-empty");
var checkempty = document.querySelector(".remove-if-empty .check-empty");

if (checkempty == null){
	parentContainer.remove();
}

</script>

Don’t forget to set the Display Rules as well. Tested this on my end and it’s working.

Hope this helps! :)

Hi Fernando,

Thanks for your prompt reply, sorry I haven't come back to you sooner. Fighting a few fires at the moment. 😅

I've taken a closer look at your solution, seems simple enough, though I can't seem to get it to work. The console in chrome's dev tools is clear. Maybe I'm missing something? See the attached.

[url=https://ibb.co/k0sDSs8][img]https://i.ibb.co/FJLYDLw/Screenshot-2022-03-17-at-02-55-42.png[/img][/url]
[url=https://ibb.co/q5jjcw5][img]https://i.ibb.co/pywwMpy/Screenshot-2022-03-17-at-02-55-49.png[/img][/url]

I see. No worries! What you’re doing is admirable.

With regards to the issue, may you kindly provide a link to a post I may view to investigate?

You may use the private information field if your prefer: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hope to hear from you soon. :)

Hi Fernando,

Thanks once more for your prompt reply, I can't provide a link directly as the site is hidden from public view, but I can provide you with temporary admin access for you to do a little digging around.

I've also highlighted the elements in question for you as I have a few. (Hopefully should save you some time.)
[url=https://ibb.co/bN6Kjnx][img]https://i.ibb.co/j38r9Fd/Screenshot-2022-03-17-at-13-47-22.png[/img][/url]

You can find the blog section on the front end, under the primary navigation About Us > 360 News, The sidebars will only display on single post pages.

Hopefully this helps, please let me know if you have any further questions and thanks for all your help thus far.

Hi there,

you can use the generate_element_display filter:

https://docs.generatepress.com/article/generate_element_display/

For example:

add_filter( 'generate_element_display', function( $display, $element_id ) {
    $categories = get_the_category();
    if ( empty( $categories ) && 100 === $element_id  ) {
        $display = false;
    }

    return $display;
}, 10, 2 );

If the categories are empty then set the display for Element ID 100 to false.
You just need to change the 100 to the ID of your element.

For the tag terms you can use get_the_tags instead:

https://developer.wordpress.org/reference/functions/get_the_tags/

add_filter( 'generate_element_display', function( $display, $element_id ) {
    $tags = get_the_tags();
    if ( empty( $tags ) && 100 === $element_id  ) {
        $display = false;
    }

    return $display;
}, 10, 2 );

Hi David,

Spot on as per usual! 👌👍

Thanks for the assist on this.

Glad to be of help