如何删除或隐藏CSS中另一个标签内的空标签？

Question

我有一个html文件，该文件使用Angular js作为框架。我使用Angular js处理某些数据，并将其显示在如下所示的span标签内的html中

<span>
    <span>
        <b ng-if="some condition">some data</b>
    </span>
    <span>
        <b>some data</b>
    <span>
</span>

现在，当条件不匹配时，b标签的内容为空。这将为页面中的这些条件创建额外的空格。

我尝试了以下css技巧来完全隐藏此类标签。

span b:empty {
        display: none;
        }

但是这没有解决。我仍然看到那些标签的空白内容（空白）。我该怎么办？我也同意使用Javascript扫描和隐藏这些元素。