'Remove empty P tags from HTML?

I am trying to strip empty <P> tags from a block of HTML within a Shopify theme. For some reason the remove filter is not detecting whatever the space character is inside the tag. I've even tried copy/pasting from source code into my command and it's not working.

{{ article.content | remove: '<p> </p>' | remove: '<p>&nbsp;</p>' }}

With this, it still remains:

Screenshot showing P tags still there after remove

Copy/paste of the pesky tag:

<p> </p>
shopifyliquid


Solution 1:[1]

replace

Replaces all occurrences of a string with a substring.

{{ article.content | replace: '<p> </p>', '' }}

Solution 2:[2]

I think I found something by copying source code from article editor in Sublime Text. If you try this (not tested) does it work better?

{{ article.content | remove: '<p><0xa0></p>' }}

Solution 3:[3]

You can just hide all empty paragraphs with:

 p:empty {display: none;}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kashif
Solution 2 Alice Girard
Solution 3 ouflak

Related Questions