Скрываем div в случае, если он пустой на JavaScript/jQuery/CSS
10 фев2 комм
Задача стоит, как вы поняли, следующая – скрыть div, если его содержимое пусто, и показывать, если в нем есть текст. Очень нужная вещь, тем более когда нет полного доступа к коду вашего ресурса.
Итак, мы полагаем, что у нас есть такая конструкция:
<div class="main_block">
К данному материалу есть комментарии:
<div class="list_comm"></div>
</div>Нам нужно скрыть весь блок, в зависимости от того, есть ли у нас текст в <div class="list_comm"></div> или нет.
Скрываем div в случае, если он пустой на JavaScript
Для решения этой задачи на JavaScript нам потребуется следующий код:
<script>
window.onload = function() {
if(document.getElementsByClassName("list_comm")[0].textContent == "") {
document.getElementsByClassName("main_block")[0].style.display = "none";
}
};
</script>Скрипт рекомендую вставлять перед закрывающим тегом </body>.
Скрываем div в случае, если он пустой на jQuery
Здесь есть два похожих варианта кода. Это
<script>
$(document).ready(function() {
if($(".list_comm").text() == "") {
$(".main_block").hide();
}
});
</script>и
<script>
$(document).ready(function() {
if($(".list_comm").is(":empty")) {
$(".main_block").hide();
}
});
</script>Этот вариант я рекомендую также вставлять перед закрывающим тегом </body>.
Скрываем div в случае, если он пустой на CSS
Здесь тоже, как всегда, все просто. В конце ваших стилей CSS вставьте:
.list_comm:empty {
display: none;
}Вот вроде и все, до новых и интересных статей!
