CODEWITHSUNDEEP
javascriptjqueryhtmlhide
AJSwift
AJSwift

Reputation: 719

Hide a div if content is empty

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>

Upvotes: 7

Views: 18379

Answers (3)

Irvin Dominin
Irvin Dominin

Reputation: 30993

Something like:

if ($('.philosophy-bubble').is(":empty")){
    $('.philosophy-bubble').hide();
}

here is a fiddle: http://jsfiddle.net/IrvinDominin/XYr9T/1/

EDIT

better by using:

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

http://jsfiddle.net/IrvinDominin/XYr9T/3/

Upvotes: -1

James Hill
James Hill

Reputation: 61872

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.

Upvotes: 19

Seth
Seth

Reputation: 6260

var myDiv =  $('#myDiv');

if (myDiv.text() == '')
{
    myDiv.hide();
}

Upvotes: 0

Related Questions