Remove the parent div if child div is empty

Question

I was trying to remove the whole parent div if it doesn't have the wc-gallery class on it. What I have in my script is the reverse of what I need. Basically it hide everything that has the wc-gallery on it.

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();
    });
});

Basically this will work fine if I Hide all the containers and display the child div afterwards though my content won't render due to script conflicts. Only way to solve this without conflict is to load first all of the containers then hide() or remove() them.

SCRIPT: (conflict due to onload content rendering)

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

HTML: (1st set is the one should be visible 2nd set is the one that needs to be remove or hide.)

<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

Loop through the '.gallery-container2' element and find out whether it has '.wc-gallery' children. if not hide the element.

$('.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

Pure JS you might do like this in ES6 terms.

 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> 

Answer 3

Try this. If div has children with class .wc-gallery than it will show the parent otherwise hide the parent.

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