Hide only those spans which are empty or have no text in them

Question

I need to hide only those spans which don't have any text.

<div class="img-wrapper">
    <div class="showcase-caption" style="display: block; "> <span id="MainContent_ImageCaption_0">This has caption</span>

    </div>
    <div class="showcase-caption" style="display: block;">  <span id="MainContent_ImageCaption_1"></span>

    </div>
    <div class="showcase-caption" style="display: block;">  <span id="MainContent_ImageCaption_2">This has caption and show show</span>

    </div>
    <div class="showcase-caption" style="display: block;">  <span id="MainContent_ImageCaption_3"></span>

    </div>
</div>

http://fiddle.jshell.net/0mzpLrt3/

Answer 1

You could make a slight change to your JavaScript (in the fiddle) to remove or hide the parent of the empty element:

$(".img-wrapper span:empty").each( function () {
    $(this).parent().remove(); // or .hide() to hide
});

Answer 2

Use the :empty pseudo class selector:

span:empty {
    display: none; /* or visibility: hidden */
}