title: How to only hide the anchor which has not text?
body: <p>I have a slider made up of multiple images and on each image there is an anchor element (treated as a button).</p>
  
  <pre><code>&lt;div class="slider"&gt;
    &lt;div class="slide"&gt;
      //img and extra html
  
      &lt;a class="slider-btn"&gt;SOME TEXT HERE&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="slide"&gt;
      //img and extra html
  
      &lt;a class="slider-btn"&gt;SOME TEXT HERE 2&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="slide"&gt;
      //img and extra html
  
      &lt;a class="slider-btn"&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The placement of the anchor without text isn't always determined as users can add more slides as they wish.</p>
  
  <p>Currently everything is displaying as it should, however if there is no text insrted in the anchor tag, the whole anchor is displayed.</p>
  
  <p>How can I hide just the anchors which have no text?</p>
  
  <p>I have tried something like: </p>
  
  <pre><code>jQuery(document).ready(function(){
       if (jQuery('.slider-btn').text() !== 0){
           jQuery('.slider-btn').show();
       }else{
           jQuery('.slider-btn').hide();
       }
   });
  </code></pre>
  
  <p>However this statement will return all the texts in all the buttons, forcing it to show.</p>
  
  <p>Any help to put me on the right path will be much appreciated.</p>