如果子p标签为空，则隐藏div块

Question

I'm working on a vertical timeline and I have three categories of events: national, international and obituaries, each of which is specified by classes of the same name. The structure of a div block is as follows:

<div class="cd-timeline__block js-cd-block">
<div class="cd-timeline__img cd-timeline__img--location js-cd-img"> 
<img src="img/cd-icon-location.svg" alt="Location">
</div>
<div class="cd-timeline__content js-cd-content">
<p class="National List">The Election Commission recommends to the President the disqualification of 20 AAP MLAs in Delhi</p>           
<span class="cd-timeline__date">Jan. 19</span></div>

If the user selects 'National' events in a dropdown (which is part of the UI), a Javascript functions automatically hides the other two category events like this:

$('#newscategory').on('change', function(){
        if(this.value=="Nat"){
            $('.National').show();
            $('.International').hide();
            $('.Obituaries').hide();
        }
});

However, if there are no 'National' events present on a particular date, the container surrounding the p tags does not get hidden. I want the timeline to skip that date altogether, which means I want to hide the parent div with class="cd-timeline__block js-cd-block" if the p tags are hidden. How can I achieve this? Another problem is that there are hundreds of events on the page.

An example of the code can be found here

Answer 1

Iterate through parent blocks using .each , and check if its child paragraph element has any content, if so leave it, if no content within child paragraph elements, hide it.

    $('.cd-timeline__block.js-cd-block').each(function () {

        var showElement = false;

        $(this).find('p').each(function () {
            var len = $.trim($(this).html()).length;

            if (len > 0) {
                showElement = true;
            }
        });

        if (showElement === false) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });

This way, parent block would appear if at least one p child element has any content available.

Answer 2

Could make use of .toggle , Array.some and :empty :

 $(function() { // For each div element $('div').each(function () { // Show it only if one of its children paragraphs is non-empty $(this).toggle($(this).find('p').toArray().some(function (p) { return !$(p).is(':empty'); })); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> div with some non empty paragraphs <p>non empty</p> <p></p> <p>non empty</p> </div> <div> div with only empty paragraphs <p></p> <p></p> <p></p> </div> 

In your case, replace $('div') with a proper (more specific) selector.