CODEWITHSUNDEEP
jqueryhtmlhide
Anjana Sharma
Anjana Sharma

Reputation: 4745

hide parent div if child div empty

If all this yellowrubberbox containes is Office Members but there are no listing for office members ie yellow-content's text is just "Office Members", then i need to hide the yellow-rubber-box..

<div class="yellow-rubber-box w-218">
        <span class="yellow-corner left-top">&nbsp;</span>
        <span class="yellow-corner right-top">&nbsp;</span>
        <span class="yellow-corner left-bottom">
        &nbsp;</span>
        <span class="yellow-corner right-bottom">
        &nbsp;</span>
        <div class="yellow-content"><h2>Office Members</h2>
        Sometimes there is no content inside this div and need to hide the yellow rubber box if this is just equals to "Office Members" which is the heading
        </div>
    </div>

why is this not doing it??

var YellowBoxContent=$.trim($('.yellow-content').text());   
        if (/Office Members/.test(YellowBoxContent)){      
        $('.yellow-rubber-box').hide();   
        }

Upvotes: 1

Views: 1531

Answers (4)

Jeff B
Jeff B

Reputation: 30099

If you want to see if an object is empty, but contains children nodes (h2), I would guess you need to parse text nodes:

$('.yellow-content').contents().each(function() {
    // If it's a text node, and it does not contain non-space
    // characters, hide the `.yellow-rubber-box` it is in
    if (this.nodeType == 3 && !this.textContent.match(/\S/)) {
        $(this).closest('.yellow-rubber-box').hide();
    }
});

Demo: http://jsfiddle.net/HKdqp/

Edit: After giving this some more thought, there could possibly be no text node, or there could be a text node (space) on either side of the h2. This code is more robust because it checks for any text nodes that contain non-space characters outside of the h2:

$(function() {
    $('.yellow-content').each(function() {
        var hide = 1;
        $(this).contents().each(function() {
            // If it's a text node, and it contains text, don't hide
            // the parent `.yellow-rubber-box`
            if (this.nodeType == 3 && this.textContent.match(/\S/)) {
                hide = 0;
            }
        });
        if (hide) {
            $(this).closest('.yellow-rubber-box').hide();
        }
    });
});

Demo: http://jsfiddle.net/HKdqp/2/

If you don't want to mess with text nodes, and want a little shorter code, you can simply remove the h2, check if the text left over is empty, and hide the div if it is. Then you can add the h2 back:

$(function() {
    $('.yellow-content').each(function() {
        var h2 = $(this).find('h2').remove();
        if($(this).text().match(/^[\s\n\r]*$/) ) {
            $(this).closest('.yellow-rubber-box').hide();
        }
        $(this).prepend(h2);
    });
});

Demo: http://jsfiddle.net/HKdqp/3/

Upvotes: 1

Jignesh Rajput
Jignesh Rajput

Reputation: 3558

you just try this :

  var YellowBoxContent=$.trim($('div.yellow-content').text());
  var search = /Office Members/;
  if (search.test(YellowBoxContent))
      {
          $("div[class^='yellow-rubber-box']").hide();
      }

Demo : http://jsfiddle.net/GWur3/8/

Upvotes: 0

Ian Wetherbee
Ian Wetherbee

Reputation: 6099

I would test for other elements within .yellow-content besides the h2 instead of converting everything to a string:

$(".yellow-content").contents().length > 1

contents will return elements and text nodes.

Upvotes: 0

James Montagne
James Montagne

Reputation: 78630

You are testing that the value contains "Office Members". This will always match. Why not just test for equality?

YellowBoxContent === "Office Members"

http://jsfiddle.net/xdzka/1/

Upvotes: 1

Related Questions