Hide element if span element inside a div tag is empty using jquery

Question

I want to hide an element if the span element inside a div has no text

below is sample HTML

<div class="showcase-caption" style="display: block;">
 <span> If this span has no text then i need to change the display property of outer div to none</span>
</div>

JsFiddle link

I tried to do this using css but it didn't work as expected. so i think jquery can work better and handle older browser also.

In this case i need to change the inline property which is generated automatically by other script for showing image caption for image gallery.

Update: Thank you guys for your replies. I am choose 'satpal' solution as it is short & gave me exact result.

Satpal · Accepted Answer · 2014-06-19 06:33:13Z

4

Just use :empty. You don't need if block.

$('.showcase-caption span:empty').parent().hide()

Demo

answered Jun 19, 2014 at 6:33

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shaunak D · Accepted Answer · 2014-06-19 06:38:02Z

1

Updated Demo

Use jQuery is() and :empty pseudo selector.

if( $('.showcase-caption span').is(':empty') ) {
    $('.showcase-caption').hide();
}

edited Jun 19, 2014 at 6:38

answered Jun 19, 2014 at 6:28

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

2 Comments

Learning Over a year ago

It still show the green bar due to padding i want to hide it completey

Shaunak D Over a year ago

@sudharsan, in my demo i had written hide() code on span click. So used this

Rajaprabhu Aravindasamy · Accepted Answer · 2014-06-19 06:39:25Z

1

Try to use .is() along with :empty selector to accomplish your task,

if($('.showcase-caption span').is(':empty')) {

DEMO

Full code:

var cache = $('.showcase-caption');
if($('span', cache).is(':empty')) {
  cache.hide();
}

DEMO

Or you can simply write by using the :has() selector,

$('.showcase-caption:has(span:empty)').hide();

DEMO

edited Jun 19, 2014 at 6:39

answered Jun 19, 2014 at 6:26

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Comments

Sudharsan S · Accepted Answer · 2014-06-19 06:28:06Z

0

if($(".showcase-caption span").html().trim().length <= 0 ){
            $(".showcase-caption").hide();
}

answered Jun 19, 2014 at 6:28

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Comments

chandu · Accepted Answer · 2014-06-19 06:30:41Z

0

Try this one.

$(function){
    if($('.showcase-caption span').is(':empty')){
        $('.showcase-caption').css("display" , "none");
    }

    }

answered Jun 19, 2014 at 6:30

chandu

2,2763 gold badges23 silver badges35 bronze badges

Collectives™ on Stack Overflow

Hide element if span element inside a div tag is empty using jquery

5 Answers 5

Comments

Updated Demo

2 Comments

DEMO

DEMO

DEMO

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related