Question

I have a client who uses a WYSIWYG editor to create new website pages. The problem is that sometime the WYSIWYG editor put in empty p tags

<p>&nbsp;</p>

This was causing havoc with the layout so i wrote a little function to remove these empty tags

$('p')
.filter(function() {
   return $.trim($(this).text()) === ''
})
.remove()

The problem now is that when a image is inserted into the wysiwyg editor it get’s included in a p tag and my function removes it from the screen.

Can either my function be updated to allow images or can I just search for and remove empty p tags???

Thanks in advance

James

Answer 1

You could make your filter also ensure that there are no child elements:

$('p').filter(function() {
    var $this = $(this);
    return !$this.children().length && $.trim($this.text()) === '';
}).remove()