JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

<div style="display:none">
<span>Child 1</span> 
<p id="child_1_xyz">
    <span style="display:none">abc</span>
    <span style="display:none">def</span>
    <span style="display:none">ghi</span>
</p> 
<span>Child 2</span>
<p id="child_2_xyz">
    <span>123</span>
    <span style="display:none">456</span>
    <span>789</span>
</p>
</div>

JavaScript

$('p[id^="child_"][id$="_xyz"]').each(function() {
    var hide=true;
    $(this).find('span').each(function(){
        if ($(this).css("display")!="none"){
            hide=false;
            return false;
        }
    });
    if (hide) { 
        $(this).prev().hide();
    } else {
        $(this).prev().show();
    }
});

$('div').show();