Javascript 仅隐藏那些为空或没有文本的跨距

我只需要隐藏那些没有任何文本的跨距

<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>

这有标题
这有标题和显示

使用伪类选择器：

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

---

您可以对JavaScript（在fiddle中）稍作更改，以删除或隐藏空元素的父元素：

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

---

你可以用这样的东西

$(".img-wrapper .showcase-caption span").each(function(){
      if ($(this).is(':empty')) 
          $(this).parent().hide()
});

我正在接受测试，工作正常

Html:

---

请记住：empty在IE8或更低版本中不起作用。正在删除跨度。您的意思是要删除span的父div吗？如果是这样，请参阅@BenjaminRay的答案。

span:empty

可以正常工作。

<div class="img-wrapper">
    <div class="showcase-caption" > <span id="MainContent_ImageCaption_0">This has caption</span>

    </div>
    <div class="showcase-caption">  <span id="MainContent_ImageCaption_1"></span>

    </div>
    <div class="showcase-caption">  <span id="MainContent_ImageCaption_2">This has caption and show show</span>

    </div>
    <div class="showcase-caption" > <span id="MainContent_ImageCaption_3"></span>

    </div>
</div>

$(".img-wrapper span:empty").each( function () {
    $(this).parent().addClass("hide");
});