jQuery скрыть кнопки, если они не содержат текст

Question

У меня есть кнопки с динамически генерируемым текстом внутри. Однако иногда не будет никакого текста, поэтому я хочу скрыть кнопку с помощью jQuery. Однако я не могу заставить его работать.

Ниже мой код:

$('.inner:empty').parent().remove(); 

<button><span class="inner">{{dynamic1}}</span></button> 
<button><span class="inner">{{dynamic2}}</span></button> 
<button><span class="inner">{{dynamic3}}</span></button> 
<button><span class="inner">{{dynamic4}}</span></button> 

Спасибо.

Answer 1

Это удовлетворяет ваши требования. Вам просто нужно использовать кавычки вокруг вашего селектора и вызвать hide вместо удаления. Работает со всеми версиями JQuery, доступных на Google JQuery CDN (1.2.3 - 2.1.1)

$(document).ready(function() { 
 
    // You can replace 'hide' with 'remove' if you want it purged from the DOM. 
 
    $('.inner:empty').parent().hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button><span class="inner">Hello</span></button> 
 
<button><span class="inner"></span></button> 
 
<button><span class="inner">World</span></button> 
 
<button><span class="inner"></span></button>