Conceal the main container when the subsequent inner div has no content

Question

Conceal the main container when the subsequent inner div has no content

I have a setup that looks something like this:

<div class="parent">
   <div class="child1">Header</div>
   <div class="child2">
      <div class="grandchild"></div>
      <div class="grandchild"></div>
      <div class="grandchild"></div>
   </div>
</div>

My goal is to hide the parent div when .child2 contains no elements. I've attempted this solution, but it doesn't seem to be working:

$(".child2:empty").parent().hide();

Could you point out what might be going wrong? Feel free to check out my sample fiddle.

UPDATE:
I should clarify that instead of .child2 being empty, I actually want the children divs of .child2 to have a display:none property. You can see the revised version of my fiddle here

jquery html css

Answer 1

Answer №1

Give this a try and see the magic,

$(document).ready(function() {
    var secondChildDiv = $(".child2");

    if (secondChildDiv.html() == "") {
        secondChildDiv.parents().hide();
    }

});

Answer 2

Give this a try and see the magic,

$(document).ready(function() {
    var secondChildDiv = $(".child2");

    if (secondChildDiv.html() == "") {
        secondChildDiv.parents().hide();
    }

});

Answer 3

Answer №2

The issue with your current code is the presence of whitespace between <div class="child2"> and </div>. By removing this whitespace, your code should work as intended:

$(".child2:empty").parent().hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
   <div class="child1">Parent 1</div>
   <div class="child2">
      <div class="grandchild">GC1</div>
      <div class="grandchild">GC2</div>
      <div class="grandchild">GC3</div>
   </div>
</div>

<div class="parent">
   <div class="child1">Parent 2</div>
   <div class="child2"></div>
</div>

If you are unable to modify the HTML to remove the whitespace, an alternative solution is to use filter() and children():

$(".child2").filter(function() {
    return $(this).children().length == 0;
}).parent().hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
   <div class="child1">Parent 1</div>
   <div class="child2">
      <div class="grandchild">GC1</div>
      <div class="grandchild">GC2</div>
      <div class="grandchild">GC3</div>
   </div>
</div>

<div class="parent">
   <div class="child1">Parent 2</div>
   <div class="child2">
   </div>
</div>

Answer 4

The issue with your current code is the presence of whitespace between <div class="child2"> and </div>. By removing this whitespace, your code should work as intended:

$(".child2:empty").parent().hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
   <div class="child1">Parent 1</div>
   <div class="child2">
      <div class="grandchild">GC1</div>
      <div class="grandchild">GC2</div>
      <div class="grandchild">GC3</div>
   </div>
</div>

<div class="parent">
   <div class="child1">Parent 2</div>
   <div class="child2"></div>
</div>

If you are unable to modify the HTML to remove the whitespace, an alternative solution is to use filter() and children():

$(".child2").filter(function() {
    return $(this).children().length == 0;
}).parent().hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
   <div class="child1">Parent 1</div>
   <div class="child2">
      <div class="grandchild">GC1</div>
      <div class="grandchild">GC2</div>
      <div class="grandchild">GC3</div>
   </div>
</div>

<div class="parent">
   <div class="child1">Parent 2</div>
   <div class="child2">
   </div>
</div>

Answer 5

Answer №3

give this a shot

$.each($(".child2"),function(){
   if($(this).children().length==0)
   {
     $(this).parent().hide();
   }
});

Answer 6

give this a shot

$.each($(".child2"),function(){
   if($(this).children().length==0)
   {
     $(this).parent().hide();
   }
});

Answer 7

Answer №4

It is recommended to trim HTML content before processing it:

$(".child2").filter(function() {
    return !$(this).html().trim();
}).parent().hide();

The issue seems to be related to the presence of whitespaces within your DIV. In CSS4, you can address this using the :blank pseudo-class.

UPDATE: If you want to ensure that the div only contains hidden children (or no displayed content), you could verify its scrolling height:

$(".child2").filter(function() {
  return !this.scrollHeight;
}).parent().hide();

Alternatively, a more reliable approach would be:

$(".child2").filter(function() {
  return $(this).children().length === $(this).children().filter(':hidden').length;
}).parent().hide();

Answer 8

It is recommended to trim HTML content before processing it:

$(".child2").filter(function() {
    return !$(this).html().trim();
}).parent().hide();

The issue seems to be related to the presence of whitespaces within your DIV. In CSS4, you can address this using the :blank pseudo-class.

UPDATE: If you want to ensure that the div only contains hidden children (or no displayed content), you could verify its scrolling height:

$(".child2").filter(function() {
  return !this.scrollHeight;
}).parent().hide();

Alternatively, a more reliable approach would be:

$(".child2").filter(function() {
  return $(this).children().length === $(this).children().filter(':hidden').length;
}).parent().hide();

Conceal the main container when the subsequent inner div has no content

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What could be causing my border to not function properly?

What steps should be followed to display an HTML page within an HTML div?

Redesigned the .filter function in my code

Attempting to arrange all the images in a horizontal display rather than a vertical one

Use jQuery's animate function to toggle a different div when clicking on one

Updating Content Dynamically with AJAX, JavaScript, and PHP without requiring a page reload or user action

Change the HTML data received from an AJAX post response using jQuery

Custom hover title to transform table into grid

Programming the action of unfolding one window while simultaneously closing all others

The XMLHttpRequest is unable to load.... The origin null has been restricted by Access-Control-Allow-Origin

Responsive Navigation Bar with Bootstrap

Learn how to extract an entire table from a website using Kimono Labs, rather than just the first ten rows

Guide on inserting text within a Toggle Switch Component using React

Verify if a request attribute has been established using jQuery

Converting HTML entities to actual characters in Angular2: How to change apostrophe's code to apostrophe symbol

Preventing a JavaScript function from executing multiple times

Show a row of pictures with overflow capabilities

What is the best way to divide a string into an array containing both linked and non-linked elements?

Troubleshooting Problem with Website Responsiveness on iPhones Using Bootstrap 5

Ensure that the top border is aligned perfectly with the top of the page while keeping the text in its