so i am trying to set a Class on a Parent Element (Section), when the second Child Div innerHTML is empty.
So for example: (This Section should get a class of "hide-section" to hide it)
<section class="ef-area">
<div class="child-1">
<div class="child-2">
</div>
</div>
</section>
This one should not be hidden because "child-2" is not empty
<section class="ef-area">
<div class="child-1">
<div class="child-2">
<div class="child-3">
...//What Ever
</div>
</div>
</div>
</section>
I looped over all "ef-area" sections but how can i set only those sections to display = none when the second child (child-2) is empty.
What I did is:
let efAreaDivs = document.querySelectorAll(".ef-area > div > div");
for (singleDiv of efAreaDivs) {
if (singleDiv.innerHTML == "") {
singleDiv.closest("section").classList.add("hide-section");
}
The class "hide-section" never gets set.
I think js always ignores it, because there are singleDiv´s that are not empty or am I wrong?
The content of <div class="child-2"> below
<section class="ef-area">
<div class="child-1">
<div class="child-2">
</div>
</div>
</section>
is NOT an empty string ... it is "\n "
You need to trim the innerHTML (which get's rid of whitspace at the beginning and end of the string, in this case everything)
if (singleDiv.innerHTML.trim() == "") {
singleDiv.closest("section").classList.add("hide-section");
}