如何在文本字段为空时自动隐藏按钮（含Hubspot模块场景）

我在HubSpot中使用文本和链接字段构建带按钮的模块，需要实现当按钮文本为空时隐藏按钮，该需求也适用于非HubSpot的其他场景。尝试过:empty选择器、JS的show()/hide()方法均无效，求简单有效的解决办法。

我的代码如下：

HTML + HubL 代码 #

<div class="main-hero-wrapper" style="padding-top:{{ module.padding.padding_top }}px; padding-bottom:
{{ module.padding.padding_bottom }}px;">
  <div class="container">
    <div class="hero-header">
      {% inline_rich_text field="hero_header" value="{{ module.hero_header }}" %}
      {% cta guid="{{ module.hero_cta }}" %}
    </div>
        
        <a href="{{ href }}"
             {% if module.cta_link.open_in_new_tab %}target="_blank"{% endif %}
             {% if module.cta_link.rel %}rel="{{ module.cta_link.rel }}"{% endif %}
             >

            <div class="cta-button">

                {{ module.cta_text }}

            </div>
        </a>

  </div>
</div>

CSS 代码 #

.cta-button  {
padding: 15px;
    border-radius: 50px;
    max-width: 200px;
    text-align: center;
    background: blue;
}

.cta-button:empty { display: none }

试过的无效JS示例：

$(document).on('keyup', 'textarea', function() {
  if ($.trim($(this).val()).length == 0) {
    $('button').show();
  } else {
    $('button').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<button>只有当文本域为空时我才显示！</button>

1. 优先用HubL模板逻辑处理（最高效） #

作为HubSpot模块，直接在模板层面判断文本是否为空，为空则不渲染按钮容器，从根源避免空按钮出现，无需前端额外处理。

修改后的代码：

<div class="main-hero-wrapper" style="padding-top:{{ module.padding.padding_top }}px; padding-bottom:
{{ module.padding.padding_bottom }}px;">
  <div class="container">
    <div class="hero-header">
      {% inline_rich_text field="hero_header" value="{{ module.hero_header }}" %}
      {% cta guid="{{ module.hero_cta }}" %}
    </div>
        
        {% if module.cta_text|trim != "" %}
        <a href="{{ href }}"
             {% if module.cta_link.open_in_new_tab %}target="_blank"{% endif %}
             {% if module.cta_link.rel %}rel="{{ module.cta_link.rel }}"{% endif %}
             >

            <div class="cta-button">
                {{ module.cta_text }}
            </div>
        </a>
        {% endif %}

  </div>
</div>

原理：通过{% if %}判断module.cta_text去除首尾空白后是否非空，仅满足条件时才渲染按钮的<a>和<div>标签。

2. 改进CSS方案（适配动态场景） #

:empty无效通常是因为.cta-button内存在换行、空格等空白字符，可通过以下CSS方案解决：

方案A：使用:has()选择器检测空白内容 #

.cta-button {
  padding: 15px;
  border-radius: 50px;
  max-width: 200px;
  text-align: center;
  background: blue;
}

/* 当按钮内只有空白字符时隐藏 */
.cta-button:has(:only-child:empty) {
  display: none;
}

注意：:has()支持现代浏览器，IE除外。

方案B：通过自定义属性检测内容 #

.cta-button {
  position: relative;
  padding: 15px;
  border-radius: 50px;
  max-width: 200px;
  text-align: center;
  background: blue;
}

/* 当自定义属性内容为空时隐藏 */
.cta-button[data-content=""] {
  display: none;
}

同时给按钮添加data-content属性：

<div class="cta-button" data-content="{{ module.cta_text|trim }}">
  {{ module.cta_text }}
</div>

3. JS/JQuery方案（通用动态场景） #

如果需要处理前端动态修改文本的场景，需先去除文本首尾空白再判断长度：

JQuery版本 #

$(document).ready(function() {
  // 页面加载时检查
  checkCTAButton();
  
  // 监听文本动态变化（比如编辑器实时输入）
  $('.cta-button').on('input', checkCTAButton);
});

function checkCTAButton() {
  $('.cta-button').each(function() {
    const text = $.trim($(this).text());
    // 隐藏/显示按钮的父级链接，避免空链接残留
    $(this).parent().toggle(text.length > 0);
  });
}

原生JS版本 #

document.addEventListener('DOMContentLoaded', function() {
  checkCTAButton();
  
  // 监听文本动态变化
  const ctaButtons = document.querySelectorAll('.cta-button');
  ctaButtons.forEach(button => {
    button.addEventListener('input', checkCTAButton);
  });
});

function checkCTAButton() {
  const ctaButtons = document.querySelectorAll('.cta-button');
  ctaButtons.forEach(button => {
    const text = button.textContent.trim();
    const parentLink = button.parentElement;
    parentLink.style.display = text.length > 0 ? 'block' : 'none';
  });
}

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