JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<div class="tour_head1">
    <h3>Description 1</h3>
    <div>
        <p>Words</p>
    </div>
    <div></div>
</div>

<div class="tour_head1">
    <h3>Description 2</h3>
    <div></div>
    <div><p></p></div>
</div>

<div class="tour_head1">
    <h3>Description 3</h3>
    <div>
        <p>More words.</p>
    </div>
    <div></div>
</div>

CSS

.tour_head1 {
    background: pink;
    min-height: 40px;
}

h3 {
    background: lightgreen;
    min-height: 10px;
}

div div {
    background: lightblue;
    min-height: 10px;
}

JavaScript

$('.tour_head1:has(h3)').each(function() {
    let contentFound = false;
    
    $(this).find('div').each(function() {
    	if ($(this).text() !== '') {
        	contentFound = true;
        }
    });
    
    if (!contentFound) {
    	$(this).fadeOut(2000);
    }
});