不使用JavaScript实现{{xyz}}为空时隐藏Some Number标签

首先明确：纯原生静态HTML本身没有逻辑判断能力，你代码里的{{xyz}}是模板引擎的插值语法，要实现无前端JS的隐藏效果，优先在模板渲染阶段做条件判断，直接不渲染空状态的标签即可，这是最干净、兼容性最好的方案。

方案1：使用模板自带的条件渲染（推荐） #

直接用你所用模板引擎的条件判断语法，把需要隐藏的label包裹起来，只有当xyz存在非空值时，才会把标签输出到最终的HTML里，全程不需要任何JavaScript执行。
不同常见模板的写法参考：

• Handlebars/Mustache 类模板：

{{#if xyz}}
<label>Some Number: {{xyz}}</label>
{{/if}}

• Jinja2/Django模板/EJS 类服务端模板：

{% if xyz %}
<label>Some Number: {{ xyz }}</label>
{% endif %}

• Vue等前端框架的模板语法（编译阶段处理，不需要运行时额外JS逻辑）：

<label v-if="xyz">Some Number: {{xyz}}</label>

方案2：CSS 取巧实现（不推荐） #

如果你的场景完全不能改模板渲染逻辑，可以用CSS选择器实现视觉隐藏，但注意这个方案下标签还是会存在于DOM结构中，且对低版本浏览器兼容性一般：

<style>
/* 当相邻的值容器为空时，隐藏前面的label */
.some-number-label:has(+ .some-number-value:empty) {
  display: none;
}
</style>

<label class="some-number-label">Some Number:</label>
<span class="some-number-value">{{xyz}}</span>

注意：该方案依赖:has()伪类，仅支持Chrome 105+、Firefox 121+等新版本浏览器，需要兼容老旧浏览器的场景不要使用。

内容的提问来源于stack exchange，提问作者Gkumar