如何动态删除HTML中的空span元素

Question

我正在使用knockout.js绑定span元素，如下所示，如果它是空的，如何隐藏第2道？将有多个地址，所以我无法保持身份和隐藏。提前谢谢。

<span data-bind="text:lane1"></span><br>
<span data-bind="text:lane2"></span><br>
<span data-bind="text:city"></span><br>

Answer 1

您可以使用visible binding

<span data-bind="text:lane1"></span><br>
<span data-bind="text:lane2"></span><br data-bind="visible: lane2">
<span data-bind="text:city"></span><br>

但如果你想要换行，那么使用div而不是span会不会更容易吗？

Answer 2

如果您愿意使用CSS（并冒可能出现的跨浏览器兼容性问题），您可以使用CSS属性选择和:empty伪类：

span[data-bind="text:lane2"]:empty {
    display: none;
}

以上假设您要隐藏span的{​​{1}}值;如果您只想隐藏具有data-bind属性的所有span元素，则为空：

data-bind

请注意，span[data-bind]:empty { display: none; } 伪类要求元素完全为空（根本没有子元素甚至文本节点）。

参考文献：

• Attribute presence and selection。
• :empty pseudo-class。