jQuery remove empty p tags

Glenn Glenn's Blog 2 Comments

In content management systems like WordPress we often find that the system auto-generates <p></p> tags. That’s a real annoyance as it adds empty space amongst layouts. Here’s a simple jQuery snippet we often use to remove this:-

<script type="text/javascript">
jQuery(document).ready( function($) {

	// remove the empty p tags
	$('.entry-content p').each(function() {
    var $this = $(this);
    if($this.html().replace(/\s|&nbsp;/g, '').length == 0)
        $this.remove();
});
});
</script>

In our example we are targeting “.entry-content’, but this can be applied to any div.
Let us know how you get on.

About the Author
jQuery remove empty p tags jQuery remove empty p tags 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.

  • toks777

    Cool. Can I do something like that to Joomla?

  • This can be applied to any div/dom element so yes you can apply this to Joomla also. Simply make sure you substitute .entry-content for the element you are targeting.