Find if classes child class has empty innerHTML in javascript/jquery-CodePudding

I am trying to figure it out whole day already and nothing seems to work, so I would really appreciate help. Here is simplified example of what I have in HTML:

<div id="big-div">
    <div >
        <div>Child:</div>
        <div >1</div>
    </div>
    <div >
        <div>Child:</div>
        <div >2</div>
    </div>
    <div >
        <div>Child:</div>
        <div ></div>
    </div>
</div>

Result is:

Child:
1

Child:
2

Child:

What I would like to achieve is to show middle-div only if small-div has any content, so the result would be:

Child:
1

Child:
2

I have tried this approach:

const element = document.getElementById("big-div");
let middle = element.getElementsByClassName("middle-div");
let small = element.getElementsByClassName("small-div");

for (let m = 0; m < middle.length; m  ) {
    for (let s = 0; s < small.length; s  ) {
        if (small[s].innerHTML = "") {
            middle[m].style.display = "none";
        }
    }
}

and the result looks like this:

Child:
Child:
Child:

I have also tried this:

var small = [...document.getElementsByClassName("small-div")];
var disappear = function () {
    if (small.innerHTML == "") {
        parent.small.display = "none";
    }
}
small.forEach(disappear);

But that didn't do anything and console.log(small.innerHTML); showed undefined.

Can someone help me figure out how to do this correctly?

CodePudding user response：

I'd find all the .small-div elements inside .middle-div elements inside #big-div and if the don't have any child nodes, add a class to the .middle-div that hides it:

const smalls = document.querySelectorAll("#big-div .middle-div .small-div");
for (const small of smalls) {
    if (!small.firstChild) {
        small.closest(".middle-div").classList.add("hide");
    }
}

Live Example (hides the elements after 800ms):

setTimeout(() => {
    const smalls = document.querySelectorAll("#big-div .middle-div .small-div");
    for (const small of smalls) {
        if (!small.firstChild) {
            small.closest(".middle-div").classList.add("hide");
        }
    }
}, 800);

.hide {
    display: none;
}

<div id="big-div">
    <div >
        <div>Child:</div>
        <div >1</div>
    </div>
    <div >
        <div>Child:</div>
        <div >2</div>
    </div>
    <div >
        <div>Child:</div>
        <div ></div>
    </div>
</div>

If you want to allow for a single node that has whitespace and still consider that div "empty", you could use:

const smalls = document.querySelectorAll("#big-div .middle-div .small-div");
for (const small of smalls) {
    if (
        !small.firstChild ||
        (small.childNodes.length === 1 && !small.firstChild.nodeValue.trim())
    ) {
        small.closest(".middle-div").classList.add("hide");
    }
}

setTimeout(() => {
    const smalls = document.querySelectorAll("#big-div .middle-div .small-div");
    for (const small of smalls) {
        if (
            !small.firstChild ||
            (small.childNodes.length === 1 && !small.firstChild.nodeValue.trim())
        ) {
            small.closest(".middle-div").classList.add("hide");
        }
    }
}, 800);

.hide {
    display: none;
}

<div id="big-div">
    <div >
        <div>Child:</div>
        <div >1</div>
    </div>
    <div >
        <div>Child:</div>
        <div >2</div>
    </div>
    <div >
        <div>Child:</div>
        <!-- Note that now it has a text node with whitespace -->
        <div >
        </div>
    </div>
</div>

CodePudding user response：

to do that you need to select all the "middle-div" elements, and for each one it selects the "msall-div" element inside it.

Then check if the inner HTML of the "small-div" element is an empty tring, and if it is, set the "display" style of the "middle-div" element to "none".

this will hide the "middle-div" element if the "small-div" element is empty.

I hope I understood your question correctly.

Here is the code snippet, since you indicate that you have not been able to solve it:

const element = document.getElementById("big-div");
const middleDivs = element.getElementsByClassName("middle-div");

for (let i = 0; i < middleDivs.length; i  ) {
  const smallDiv = middleDivs[i].getElementsByClassName("small-div")[0];
  if (smallDiv.innerHTML === "") {
    middleDivs[i].style.display = "none";
  }
}

CodePudding user response：

when you are using double loop it is increasing the TC and make sure a condition that when m will be equal to s then this will work and you can make it also for two times only.