Question 35829 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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 class="middle-div">
        <div>Child:</div>
        <div class="small-div">1</div>
    </div>
    <div class="middle-div">
        <div>Child:</div>
        <div class="small-div">2</div>
    </div>
    <div class="middle-div">
        <div>Child:</div>
        <div class="small-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?

Tags:

3

Answers


  1. 0

    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 class="middle-div">
        <div>Child:</div>
        <div class="small-div">1</div>
    </div>
    <div class="middle-div">
        <div>Child:</div>
        <div class="small-div">2</div>
    </div>
    <div class="middle-div">
        <div>Child:</div>
        <div class="small-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 class="middle-div">
        <div>Child:</div>
        <div class="small-div">1</div>
    </div>
    <div class="middle-div">
        <div>Child:</div>
        <div class="small-div">2</div>
    </div>
    <div class="middle-div">
        <div>Child:</div>
        <!-- Note that now it has a text node with whitespace -->
        <div class="small-div">
        </div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    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";
  }
}
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search