CODEWITHSUNDEEP
javascripthtmljquery
steph66
steph66

Reputation: 57

hide div if other div is empty in jquery

I "just" want to hide the title of this div (#event-cdc) if the div is empty I have this html element to test

<div class="elementor-element elementor-element-fce254c elementor-invisible elementor-widget elementor-widget-jet-headline" data-id="fce254c" data-element_type="widget" id="event-cdc" data-settings="{&quot;_animation&quot;:&quot;fadeInUp&quot;}" data-widget_type="jet-headline.default">
                <div class="elementor-widget-container">
            <h2 class="jet-headline jet-headline--direction-vertical"><span class="jet-headline__part jet-headline__first"><span class="jet-headline__label">Les évènements</span></span><span class="jet-headline__part jet-headline__second"><span class="jet-headline__label">où nous serons présent</span></span></h2>      </div>
                </div>
                <div class="elementor-element elementor-element-8ae0c27 elementor-invisible elementor-widget elementor-widget-bdt-event-list" data-id="8ae0c27" data-element_type="widget" id="event1" data-settings="{&quot;_animation&quot;:&quot;fadeInRight&quot;}" data-widget_type="bdt-event-list.default">
                <div class="elementor-widget-container">
                    <div id="bdt-event-8ae0c27" class="bdt-event-list bdt-event-calendar">
            <div class="bdt-list bdt-list-large">

                        
            </div>
        </div>
                </div>
                </div>
                        </div>
                    </div>
        </div>
                                </div>
                    </div>

And I can just call this div #event1 with this jquery code :

jQuery(document).ready(function(){
    if ( $("#event1").children().length === 0 ) {
        $("#event-cdc").hide();
    }
});

I have also trying with this condition :

if ( $.trim( $('#event1').text() ).length === 0 ) {

Without success...

Have you an idea to help me ?

Regards

Upvotes: 0

Views: 858

Answers (3)

Alexander Nied
Alexander Nied

Reputation: 13678

The example code provided doesn't actually show div#event-cdc in the markup, so we can't know for sure that the hiding piece will work, but critically neither of your conditions is evaluating as true. Here's an example of the children of #event1:

jQuery(document).ready(function(){
    console.log($("#event1").children().length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementor-element elementor-element-8ae0c27 elementor-widget elementor-widget-bdt-event-list animated fadeInRight" data-id="8ae0c27" data-element_type="widget" id="event1" data-settings="{&quot;_animation&quot;:&quot;fadeInRight&quot;}" data-widget_type="bdt-event-list.default">
    <div class="elementor-widget-container">
        <div id="bdt-event-8ae0c27" class="bdt-event-list bdt-event-calendar">
            <div class="bdt-list bdt-list-large">
            </div>
        </div>
    </div>
</div>

And here's an example of the text():

jQuery(document).ready(function(){
    console.log($.trim( $('#event1').text() ));
    console.log($.trim( $('#event1').text().length ));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementor-element elementor-element-8ae0c27 elementor-widget elementor-widget-bdt-event-list animated fadeInRight" data-id="8ae0c27" data-element_type="widget" id="event1" data-settings="{&quot;_animation&quot;:&quot;fadeInRight&quot;}" data-widget_type="bdt-event-list.default">
    <div class="elementor-widget-container">
        <div id="bdt-event-8ae0c27" class="bdt-event-list bdt-event-calendar">
            <div class="bdt-list bdt-list-large">
            </div>
        </div>
    </div>
</div>

The problem you are running into with $.trim is that it preserves whitespace in the middle, so it is keeping your giant whitespace output.

Regardless, $.trim is deprecated-- if you use the native JavaScript .trim it works just fine:

jQuery(document).ready(function(){
    console.log($('#event1').text().trim().length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementor-element elementor-element-8ae0c27 elementor-widget elementor-widget-bdt-event-list animated fadeInRight" data-id="8ae0c27" data-element_type="widget" id="event1" data-settings="{&quot;_animation&quot;:&quot;fadeInRight&quot;}" data-widget_type="bdt-event-list.default">
    <div class="elementor-widget-container">
        <div id="bdt-event-8ae0c27" class="bdt-event-list bdt-event-calendar">
            <div class="bdt-list bdt-list-large">
            </div>
        </div>
    </div>
</div>

Here's the working example using the updated code from your question:

jQuery(document).ready(function(){
    if ($('#event1').text().trim().length === 0) {
      $("#event-cdc").hide();
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementor-element elementor-element-fce254c elementor-invisible elementor-widget elementor-widget-jet-headline" data-id="fce254c" data-element_type="widget" id="event-cdc" data-settings="{&quot;_animation&quot;:&quot;fadeInUp&quot;}" data-widget_type="jet-headline.default">
    <div class="elementor-widget-container">
        <h2 class="jet-headline jet-headline--direction-vertical"><span class="jet-headline__part jet-headline__first"><span class="jet-headline__label">Les évènements</span></span><span class="jet-headline__part jet-headline__second"><span class="jet-headline__label">où nous serons présent</span></span></h2>
    </div>
</div>
<div class="elementor-element elementor-element-8ae0c27 elementor-invisible elementor-widget elementor-widget-bdt-event-list" data-id="8ae0c27" data-element_type="widget" id="event1" data-settings="{&quot;_animation&quot;:&quot;fadeInRight&quot;}" data-widget_type="bdt-event-list.default">
    <div class="elementor-widget-container">
        <div id="bdt-event-8ae0c27" class="bdt-event-list bdt-event-calendar">
            <div class="bdt-list bdt-list-large">
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Chris P
Chris P

Reputation: 2355

try something like this:

$(document).ready(function(){
   if($("#div-which-will-check-to-be-empty").text()==""){
        $("#div-to-hide").css("display","none");
   }else{
        $("#div-to-hide").css("display","inline");
   }
})

Upvotes: 0

Ben Zelnick
Ben Zelnick

Reputation: 522

You can use plain JavaScript.

if(document.getElementById("if-no-content-div-id").innerHTML = "") {
  document.getElementById("div-to-hide-id").hidden = "true";
}

Then use something like setInterval to run it continuously, if you wish.

Upvotes: 0

Related Questions