JSFiddle - React, Tailwind, and code Playground

HTML

<div class="remove-empty-tags">
    <!--Some empty tags...-->
    <p></p> 
    <p><em></em></p>
    
    <p><em><strong></strong></em></p>

    <p>Not an empty tag :)</p>
    
    <button class="js-go">Remove Empty Tags</button>
</div>

CSS

p {
    position: relative;
    border: solid 1px #ddd;
    padding: 20px;
}

p:after {
    position: absolute;
    top: -1px;
    left: -1px;
    background: #999;
    padding: 4px 2px;
    color: white;
    display: block;
    content: '<p>';
    font-size: 11px;
    font-family: arial;
    
}

JavaScript

function removeEmptyTagsRecursively($el) {
    if ($el.children().length) {
        
        $el.children().each(function(i, val) {
            removeEmptyTagsRecursively($(val));
        });
        
        $el.children(':empty').remove();
    }
}

$(document).ready(function() {
    
    $('.js-go').on('click', function() { 
        removeEmptyTagsRecursively($('.remove-empty-tags')); 
        $(this).attr('disabled', true);
    });
    
});