Question

So I have dynamic content and want to remove empty elements and empty child elements (if any). There is a few scenarios that occur:

HTML

<p> </p>

<p><img src="image.jpg" /></p>

<p><strong></strong></p>

jQuery

$(".articleContent p").filter( function() {
    return !($.trim($(this).text()).length) && !($(this).children().length);
}).hide()

Problem is it doesn’t account for empty child elements. I’ve tried tweaking and it either hides the img or the empty child elements.

Suggestions?

Answer 1

The .text() method gets the text of the selected element and all its descendants, so you don’t need to test children elements for text.

$(".articleContent p").filter( function() {
            $this = $(this);
    return (!$.trim($this.text()).length && !$this.has('img').length);
}).hide()

DEMO