Javascript: Как скрыть div, если ярлык внутри пуст

Question

Я хотел бы скрыть div с классом = "form-group", если на ярлыке внутри нет ничего, чтобы показать вот мой html-код:

echo'<div class="form-group">'; 
         echo'<label for="exampleInputFile" class="tbh">'.$query2['req_1'].'</label>'; 
         echo'<input type="file" name="my_image" accept="image/*" id="exampleInputFile"> '; 
         echo'</div>'; 

И мой браузер здесь:

<script type="text/javascript"> 
         if($('label.tbh:empty')){ 
          $('div.form-group').hide(); 
         } 
         </script> 

есть ли другой способ сделать это? В моем коде это не работает. Заранее спасибо за помощь.

Answer 1

Если вы используете JQuery, вы можете сделать это таким образом:

$("div.form-group label.tbh:empty").parent().hide(); 

Это правильный способ сделать в внутри document.ready обратного вызова:

$(document).ready(function(){ 
    $("div.form-group label.tbh:empty").parent().hide() 
}); 

Чтобы включить jQuery, добавьте

echo '<script src="https://code.jquery.com/jquery-3.1.1.js"></script>'; 

главе вашего скрипта.

Но похоже, что вы используете PHP или что-то вроде своей внутренней стороны? Если да, то вы можете сделать это на стороне сервера кода:

if(strlen($query2['req_1']) == 0) 
{ 
    echo'<div class="form-group">'; 
    echo'<label for="exampleInputFile" class="tbh">'.$query2["req_1"].'</label>'; 
    echo'<input type="file" name="my_image" accept="image/*" id="exampleInputFile"> '; 
    echo'</div>'; 
} 

в этом случае вы бы не передать ненужные данные клиенту.

Answer 2

Попробуйте это:

if($('label.tbh').html() == ""){ 
    $('div.form-group').hide(); 
    } 

Answer 3

U может сделать это следующим образом:

/* Be sure that ur dom is loaded */  
$(document).ready(function() { 
    /* Checking that the label is empty */ 
    if($("label").html().length == 0) { 
     $('div.form-group').hide(); 
    } 
}); 

U также можно использовать размер() вместо длины;)

Answer 4

Использование .text() является более безопасным вариантом , Если метка пуста, .text() вернет пустую строку, и ее отрицание даст true. Обратитесь к интерактивному фрагменту, приведенному ниже. Я поместил соответствующий код в обработчик нажатия кнопки, чтобы доказать, что он работает после нажатия на него.

$('button').click(function() { 
 
    if (!$('.tbh').text()){ 
 
    $('.form-group').hide(); 
 
    } 
 
});

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

 
<div class="form-group"> 
 
<label for="exampleInputFile" class="tbh"></label> 
 
<input type="file" name="my_image" accept="image/*" id="exampleInputFile"></div> 
 

 
<button>Click to hide</button>