Question

35

Hide a div if content is empty

rated 0 times [ 40] [ 5] / answers: 1 / hits: 17767 / 13 Years ago, tue, november 29, 2011, 12:00:00

Philosophy bubble is like a quote/speech bubble div styled which has a sharepoint control inside, the richHtmlField which lets users to type in content while editing page, but if the user chooses to leave it empty, there will be no content in the div so only the bubble will show up in the page which will look funny so i wanna hide the whole div when there is no user entry or basically the div is empty?? How do you do this in jquery?

<div class=philosophy-bubble>

<PublishingWebControls:RichHtmlField FieldName=carephilosophy runat=server></PublishingWebControls:RichHtmlField>

</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

freddiej

Add To Favorites

Follow

Total Points: 294

Total Questions: 95

Total Answers: 97

Location: Saudi Arabia

Member since Sat, Aug 20, 2022

2 Years ago

answered 13 Years ago kylanalis · Accepted Answer

Use jQuery's :empty selector:

$('.philosophy-bubble:empty').hide();

Here's a working fiddle.

Alternative

You could also use the filter() function to find all empty div's and hide:

//All divs

$('div').filter(function() {

        return $.trim($(this).text()) === ''

}).hide()



//div's with a certain class

$('.philosophy-bubble').filter(function() {

        return $.trim($(this).text()) === ''

}).hide()



//div with a specific ID

$('#YourDivID').filter(function() {

        return $.trim($(this).text()) === ''

}).hide()

..etc.

Note: the :empty selector will be more performant. See jsPerf.