Скрыть родительский DIV, если список пуст

Question

У меня есть следующие ....

<div class="validationbox"> 
    <h1>Errors</h1> 
     <ul class="validationerrors"> 
      <li>Error 1</li> 
      <li>Error 2</li> 
      <li>Error 3</li> 
     </ul> 
</div> 

Элементы списка ошибок генерируются динамически, так что иногда их нет, я хотел бы скрыть «validationbox» Див, если нет элементов списка.

Я представляю, что это javascript или jquery, на которые я должен смотреть, есть ли у кого-нибудь примеры?

Answer 1

В JQuery вы можете сделать это так же просто, как:

$(".validationbox:not(:has(li))").hide(); 

В чистом JavaScript нужно перебирать элементы ".validationbox" и поиск <li> узлов внутри:

var div = document.getElementsByClassName("validationbox"); 
for (var i = 0, len = div.length; i < len; i++) { 
    if (!div[i].getElementsByTagName("li").length) { 
     div[i].style.display = "none"; 
    } 
} 

Answer 2

$('.validationbox').toggle($('.validationerrors li').length); 

toggle() принимает в качестве аргумента значение boolean. $('.validationerrors li').length будет оценивать значение false, если нет <li> элементов, иначе true, в котором будет отображаться список ошибок.

Answer 3

вы можете использовать нет.

$('div .validationbox').not(':has(li)').hide(); 

надеюсь, что это поможет вам