Удалить родительский div, если дочерний div пуст

Question

Я пытался удалить весь родительский div, если на нем нет класса wc-gallery. То, что у меня есть в моем сценарии, - это то, что мне нужно. В основном он скрывает все, что имеет на нем wc-gallery.

SCRIPT:

// Additional Scripts 
$(window).load(function() { 
    $(".gallery-container2 .gallery-item .wc-gallery").hide(); 
}); 
$(".gallery-container2 p").click(function() { 
    var id = $(this).data('id'); 
    $("[data-id=" + id + "].gallery-item .wc-gallery").toggle() 
}); 


$(function(){ 
    $(".gallery-item").each(function(){ 
     $(this).children('.wc-gallery').parents('.gallery-container2').hide(); 
    }); 
}); 

В основном это будет работать нормально, если я Скрыть все контейнеры и показывать ребенка DIV потом, хотя мое содержание не будет оказывать из-за конфликтов сценария. Единственный способ решить это без конфликта - сначала загрузить все контейнеры, затем hide() или remove().

SCRIPT: (конфликт из-за OnLoad рендеринга контента)

$('.gallery-container2').hide(); 
$(function(){ 
    $(".gallery-item").each(function(){ 
     $(this).children('.wc-gallery').parents('.gallery-container2').show(); 
    }); 
}); 

HTML (. Первый набор является один должен быть виден второй набор является тот, который должен быть удалить или скрыть)

<ul> 
    <li><div class="gallery-container2"> 
     <p data-id="1723"><strong>some text</strong></p> 
     <div class="gallery-item" data-id="1723"> 
      <div class="wc-gallery" style="display: none;"></div> 
     </div> 
    </div></li> 
    <li><div class="gallery-container2"> 
     <p data-id="2455"><strong>View before and after</strong></p> 
     <strong></strong> 
     <div class="gallery-item" data-id="2455"> 
      <div><div></div></div> 
     </div> 
    </div></li> 
</ul> 

Answer 1

Петля через элемент '.gallery-container2' и выяснить, имеет ли это .wc галерея»дети. если не скрыть элемент.

$('.gallery-container2').each(function(){ 
    var $this = $(this); 

    //find element with 'wc-gallery' class 
    var hasGallery = $this.find('.wc-gallery').length > 0; 

    if(!hasGallery){ 
     $this.hide(); 
    } 
}); 

Answer 2

Попробуйте это. Если div имеет дочерние элементы с классом .wc-gallery, то он отображает родителя, иначе скрывает родителя.

$(function() { 
    $(".gallery-item").each(function() { 
    if($(this).children('.wc-gallery').length > 0) 
     $(this).parents('.gallery-container2').show(); 
    else 
     $(this).parents('.gallery-container2').hide(); 
    }); 
}); 

Answer 3

Pure JS, вы можете сделать это в ES6.

var divsToHide = document.querySelectorAll("div div :not(.wc-gallery)"); 
 
for (var div of divsToHide) div.parentElement.parentElement.style.display = "none";

<div class="gallery-container2"> 
 
    <p data-id="1723"><strong>some text</strong> 
 
    </p> 
 
    <div class="gallery-item" data-id="1723"> 
 
    <div class="wc-gallery">first container</div> 
 
    </div> 
 
</div> 
 

 
<div class="gallery-container2"> 
 
    <p data-id="1724"><strong>some text</strong> 
 
    </p> 
 
    <div class="gallery-item" data-id="1724"> 
 
    <div> 
 
     <div>second container</div> 
 
    </div> 
 
    </div> 
 
</div>