How do I remove empty p tags with jQuery?

The platform I’m building a website on produces empty p tags in wysiwyg mode. How can I take these out?

Something like this, perhaps…

$("<p> </p>").remove();

Although the code above does nothing.

Answer

The answer depends on what “empty” means. If the empty paragraphs are <p></p> then fireeyedboy’s p:empty selector is the way to go. If there could be spaces or newlines or other such things then you’ll probably want something like this:

$('p').each(function() {
    var $this = $(this);
    if($this.html().replace(/s|&nbsp;/g, '').length == 0)
        $this.remove();
});

Example: http://jsfiddle.net/ambiguous/7L4WZ/

FCKEditor (not sure about CKEditor or TinyMCE) likes to add <p>&nbsp;</p> to the HTML so you might need the above somewhat ugly approach.

Leave a Reply

Your email address will not be published. Required fields are marked *