Скрыть пустое недопустимое предупреждение Bootstrap с помощью CSS?

Question

Я использую бутстрап 3 предупреждения для отображения встроенных ошибок формы. Удобно я в состоянии скрыть пустые оповещения, используя следующее правило CSS:

.alert:empty{ 
    display:none; 
} 

Я хотел бы, чтобы эти предупреждения dismissable с помощью JS Bootstrap в. Пример разметка Bootstrap выглядит следующим образом:

<div class="alert alert-danger alert-dismissible" role="alert"> 
    <button type="button" class="close" data-dismiss="alert"> 
     <span aria-hidden="true">&times;</span><span class="sr-only">Close</span> 
    </button> 
</div> 

Но теперь оповещения никогда «: пустые», как они держат кнопку распускать. Есть ли способ скрыть (когда пустой, исключая разметку кнопки) эти предупреждения, используя чистый CSS, или я застрял с JS?

Answer 1

Здесь, в основном после каждого оповещения вам нужен скрипт, который проверяет, пусто ли сообщение div. Если пусто JS код скрыть оповещения, отмеченные ID:

JSFiddle: here

function hideAlert(id){ 
    var text = $('#'+id+' .message').text(); 
    console.log(text.length); //white spaces, new lines counts to 
    if(text.length <= 0) 
     $('#'+id).hide(); 
}