Beaver Builder: hide row if empty field connection

Modules with Themer field connection may have no content to display depending on Post content availability.
If a module doesn't have any content to show and is the only item in its parent containers (column and row), parents would still show up, unnecessarily cluttering the page.
So we want to dynamically remove them.

1. Tag parent containers to remove

Manually add a class to a parent to remove, for example hide-if-empty to a row that contains a potentially empty module.
This is convenient if we want to target only some elements and not others.

2. Detect modules with empty field connection

Add this Beaver Builder's filter to function.php, it was initially made to remove items that have empty field connection:

function check_field_connections( $is_visible, $node ) {
	if ( isset( $node->settings->connections ) ) {
		foreach ( $node->settings->connections as $key => $connection ) {
			if ( ! empty( $connection ) && empty( $node->settings->$key ) ) {
				return false;
			}
		}
	}
	return $is_visible;
}
add_filter( 'fl_builder_is_node_visible', 'check_field_connections', 10, 2 );

Infos here: https://kb.wpbeaverbuilder.com/article/462-hide-row-or-module-when-field-connection-is-empty-themer

This code detects and removes items with empty field connection from page.
But it doesn't remove their parents, so we customize it so that it keeps detecting those items, tags them and keeps them in the page.

Custom 1: tag items

Add a line before return false; that will add empty-field class to items with empty field connection so they can be targeted later using jQuery:

$node->settings->class = "empty-field";

Custom 2: keep items in the page

Delete this line:

return false;

Items will be removed later using jQuery.

Final code

function check_field_connections( $is_visible, $node ) {
	if ( isset( $node->settings->connections ) ) {
		foreach ( $node->settings->connections as $key => $connection ) {
			if ( ! empty( $connection ) && empty( $node->settings->$key ) ) {
				$node->settings->class = "empty-field"; 
			}
		}
	}
	return $is_visible;
}
add_filter( 'fl_builder_is_node_visible', 'check_field_connections', 10, 2 );

3. Detect shortcodes with empty field connection

The customized Beaver Builder's PHP code upper doesn't detect field connection in shortcodes, but the jQuery removal script (see below) remains effective on any child item with empty-field class.
So, let's insert a conditional field connection shortcode to check if content is available, and add filled-field class if yes and empty-field class if not:

[ wpbb-if post:featured_image ]
    [ wpbb post:featured_image ]
    <span class="filled-field"></span>
[ wpbb-else ]
    <span class="empty-field"></span>
[ /wpbb-if ]

NOTE: extra spaces after/before brackets tags are here just for display purpose so that the shortcodes are not rendered, they have to be finally removed.

4. Remove parent

Add this code to Beaver Builder's Global setup > JavaScript:

jQuery('.hide-if-empty').each(function() {
	if ( (jQuery(this).find('.empty-field, .fl-post-grid-empty').length) && !(jQuery(this).find('.filled-field').length) ) {
		jQuery(this).remove();
	}
});

The script will inspect each parent block with hide-if-empty class to find child items with empty-field class (automatically added by PHP detection code on modules) or fl-post-grid-empty class (automatically added by BB) and filled-field class (manually added to field connection shortcodes).
It will then remove parent blocks that include only empty fields from page HTML markup.

Test

The rows below with green backgrounds contain modules with field connection or field connection shortcodes. Depending on the contents available for this post, fields may be filled or empty. So that they remain visible in this test page, the rows don't have hide-if-empty class (they would be auto removed by the jQuery script otherwise)

Clicking the button below will trigger the jQuery removal script: the rows including only empty field connections should be removed from page.

Below a Photo module with field connection to Featured image.

(THIS POST HAS NO FEATURED IMAGE)

Below an HTML module with 1 field connection shortcode to Featured image.

(THIS POST HAS NO FEATURED IMAGE)

Below a HTML module with 2 field connection shortcodes, one to an ACF text custom field, the other to Featured image.

(THIS POST HAS A FILLED ACF TEXT CUSTOM FIELD BUT NO FEATURED IMAGE)

This is the ACF text custom field content for this post!