Hide parent div class if child div class does not have content when there are multiple parent divs with the same class name

Question

I have a slider where some of the images in the slider can have an optional photo- credit containing text or link in a popper. I would like to iterate over all of the popper instances and if all of the p tags in the .photo-credit p class are empty, then hide only that instance of the parent popper. I've tried to piece together a solution from some other posts, but have not been able to get it to work. The code I have does not hide a popper if all p tags are empty for that popper. I'm a JavaScript newbie and would appreciate any help.

HTML

<div class="slider-wrapper">
<!--Required Root Element-->
<div class="slider">
    <!--Required List Element-->
    <div class="slider-list">
        <div class="slider-item">
            <div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" /></div>
            <div class="slider-content-container">
                <h1>B LIne: The Place to Be</h1>
                <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div>
            </div>
            <div class="popper">
                <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
            </div>
            <div class="photo-credit hide">
                <p><p><a href="http://www.someurl.com">A photo credit</a>.</p></p>
                <p></p>
            </div>
        </div><div class="slider-item">
            <div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
            <div class="slider-content-container">
                <h1>July 4th: You missed it!</h1>
                <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div>
            </div>
            <div class="popper">
                <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
            </div>
            <div class="photo-credit hide">
                <p></p>
                <p></p>
            </div>
        </div><div class="slider-item">
            <div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
            <div class="slider-content-container">
                <h1>Festival coming Aug. 31st!</h1>
                <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div>
            </div>
            <div class="popper">
                <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
            </div>
            <div class="photo-credit hide">
                <p></p>
                <p></p>
            </div>
        </div>
    </div>
</div>

<a href="#" class="slider-control-prev"><img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg"></a>
<a href="#" class="slider-control-next"><img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg"></a>

<p class="slider-pagination"></p>

</div>

JavaScript

     $('.popper').each(function () {
            //var $thisPopper = $(this);
            var hasContent = 0;
            $('.photo-credit p').each(function () {
                if($(this).html().length > 0) {
                  hasContent++;
                }
            });
            if(hasContent > 0){
                //$thisPopper.hide();
                $(this).hide();
            }
        }); 

Answer 1

You were on the right direction. However a couple mistakes in your javascript. You tried to target all the div with "popper" class. However, the div with "popper" and "photo-credit" are on the same level. Why not targeting their parent div instead?

Try this code. It's been tested ( Link to jsfiddle )

$('.slider-item').each(function () {
        var thisSilerItem = $(this);
        var hasContent = 0;
        thisSilerItem.find('.photo-credit p').each(function () {
            if($(this).html().length > 0) {
              hasContent++;
            }
        });
        if(hasContent <= 0){
            thisSilerItem.find('.popper').hide();
        }
    }); 

Edit : Bonus: If your page has a large amount of sliders, this jquery solution will cause some UX issues ("jumpy" div on/after page load)

Try a CSS only solution.

When you render your DOM elements. Add a class to "popper" div if the content of "photo-credit" is empty.

<div class="popper hide">
// img
</div>

Then in your CSS, add

.popper.hide { display: none; }

Answer 2

It's hard to fully gather what you want to do, but if I understand correctly...

$('.popper').each(function () { 

  var photoCredit = $(this).find(".photo-credit p")

    if ( $(photoCredit).is(':empty') ){
      $(this).hide();
    }

});

It's worth pointing out that CSS4 developers are working on a 'has' selector but as of July 2017 there is no support for any browser just yet.

It is expected to work in the following manner:

.popper:has(> p:empty) { display: none }

I hope this helps... :)

Answer 3

You can check this code.

        $.each($('.popper'), function (index, popper) {
            var isEmptry = true;
            $.each($(popper).next('.photo-credit').children(), function (index, ptag) {
                if ($.trim($(ptag).html()) != '')
                    isEmptry = false;
            });
            if (isEmptry)
                $(popper).hide();
        });

Working code

 $.each($('.popper'), function (index, popper) { var isEmptry = true; $.each($(popper).next('.photo-credit').children(), function (index, ptag) { if ($.trim($(ptag).html()) != '') isEmptry = false; }); if (isEmptry) $(popper).hide(); }); 

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <div class="slider-wrapper"> <!--Required Root Element--> <div class="slider"> <!--Required List Element--> <div class="slider-list"> <div class="slider-item"> <div class="slider-image-container"> <img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" /> </div> <div class="slider-content-container"> <h1>B LIne: The Place to Be</h1> <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> </div> <div class="popper"> <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> </div> <div class="photo-credit hide"> <p> <p><a href="http://www.someurl.com">A photo credit</a>.</p> </p> <p></p> </div> </div> <div class="slider-item"> <div class="slider-image-container"> <img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /> </div> <div class="slider-content-container"> <h1>July 4th: You missed it!</h1> <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> </div> <div class="popper"> <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> </div> <div class="photo-credit hide"> <p></p> <p></p> </div> </div> <div class="slider-item"> <div class="slider-image-container"> <img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /> </div> <div class="slider-content-container"> <h1>Festival coming Aug. 31st!</h1> <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> </div> <div class="popper"> <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> </div> <div class="photo-credit hide"> <p></p> <p></p> </div> </div> </div> </div> <a href="#" class="slider-control-prev"> <img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg"></a> <a href="#" class="slider-control-next"> <img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg"></a> <p class="slider-pagination"></p> </div>