JSFiddle - React, Tailwind, and code Playground

HTML

<div>Case 1: Element containing text should not be hidden.</div>

<p>Hello World!</p>

<div>Case 2: Element containing child element should not be hidden.</div>

<p>
    <span>
        <!-- Even with no text, child element keeps this from being hidden -->
    </span>
</p>

<div>Case 3: Element containing nothing at all should be hidden.</div>

<p> </p>

<div>Case 4: Element containing only whitespace should be hidden.</div>

<p>
    
</p>

<div>Case 5: Element containing only comments should be hidden.</div>

<p>
    <!-- This comment should not keep element from being hidden -->
</p>

CSS

p {
    background-color: blue;
    color: white;
    padding: 1em;
}

JavaScript

$('p').each(function(){
    if($.trim($(this).text()) == '' && $(this).children().length == 0){
        $(this).hide(); 
    }
});