How can I automatically hide buttons when the text field is blank?

Question

I am building modules in Hubspot with buttons using the text and link fields, but this could apply elsewhere outside of Hubspot too (looking for how to hide a button or div with no text).

I believe I need Javascript and/or Jquery to check for if a button has text or not but after searching dozens of StackOverflow questions I haven't found anything that works. I'm hoping it's something simple but not sure. Any help appreciated.

In my example I want a way to check if the div class "cta-button" has empty text or has text. If it doesn't have any text I want the button hidden.

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>

The css is just to show the button:

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



.cta-button:empty { display: none }

I've tried :empty and .show and .hide but nothing seemed to work. The button still shows even when the cta text field is blank.

example:

$(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>I'm only here if the textarea is empty !</button>

Answer 1

Try instead of display:none to use visibility: hidden

NOTE: Make sure that cta-button div is completely empty, and doesnt have any empty string(that might occurr from module.cta_text) or any whitespaces