Uklanjanje bloka za listom događaja ako je div prazan

Problem

želim sakriti ovaj blok

<div class="element-block events-listing">
   <div class="events-listing-header">
      <h3 class="element-title">Predstojeći događaji</h3>
      <hr class="sm">
   </div>
   <div class="events-listing-content"></div>
</div> 

ako je

<div class="events-listing-content"></div>

prazan.

Kako to najlakše napraviti

1. u custom.js dodati kod

javascript (u folderu child teme napraviti js/custom.js)

document.addEventListener('DOMContentLoaded', function() {
    // Sakrij prazan events listing blok
    document.querySelectorAll('.events-listing').forEach(block => {
        const content = block.querySelector('.events-listing-content');
        if (content && content.innerHTML.trim().length === 0) {
            block.style.display = 'none';
        }
    });
});

2. u functions.php child teme dodati

php

function moja_child_tema_scripts() {
    wp_enqueue_script(
        'custom-js',
        get_stylesheet_directory_uri() . '/js/custom.js',
        array(),
        '1.0',
        true  // učitaj u footer-u
    );
}
add_action('wp_enqueue_scripts', 'moja_child_tema_scripts');

prije odadavanje koda u custom.js probati kopirati js u console da se uvjerimo da radi.

Još lakše (ali samo ako je div stvarno prazan)

.events-listing:has(.events-listing-content:empty) {
    display: none;
}

Za starije browsere gdje :has() nije podržan

.events-listing-content:empty {
    display: none;
}

.events-listing-content:empty ~ .events-listing-header,
.events-listing:has(.events-listing-content:empty) {
    display: none;
}

Ako CSS ne radi, vjerojatno je problem što events-listing-content div nije tehnički “prazan” – može sadržavati razmake, nove redove ili komentare.

Ako :empty ne radi zbog whitespace-a, može se probati ovaj CSS hack:

css.events-listing-content:not(:has(*)) {
    display: none;
}

.events-listing:has(.events-listing-content:not(:has(*))) {
    display: none;
}