Reputation: 57
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="{"_animation":"fadeInUp"}" 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="{"_animation":"fadeInRight"}" 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
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="{"_animation":"fadeInRight"}" 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="{"_animation":"fadeInRight"}" 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="{"_animation":"fadeInRight"}" 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="{"_animation":"fadeInUp"}" 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="{"_animation":"fadeInRight"}" 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
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
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