…covering cloud technologies such as Office 365, Azure, Amazon and, of course, SharePoint

Using JQuery to "Hide" Empty Divs

December 07, 2009 by Greg Carnie

So, I thought it was about time for me to start blogging again.  So much for weekly.  I will shoot for monthly this time!

Anyway, here’s today scenario:

I have a page layout with several fields (plain text or rich html) exposed.  The template is meant to be used for corporate policies which can be very long with many sections or very short with one section and anywhere in between.  What I needed to do was remove the   from child divs that only contained that in the html.

Solution: With the use of some jquery and a bit of trial and error the code below will do exactly what I wanted.  When the page is rendered the empty lines are removed.  When the page is edited all the field controls are still shown accordingly.

$(document).ready(function() { $(‘.‘).each(function() { var value=$(this).children(“:first”).html().toLowerCase(); if(value==’  ’) { $(this).remove(); } }); });


Written by Greg Carnie

I am a SharePoint consultant (Business Analyst by title) with Ideaca Knowledge Services based in Toronto, Canada. I have been actively working with SharePoint for three years now and have been specializing more in the developmental and architectural aspects of SharePoint. In a previous life I worked both with SAP and Microsoft Exchange. In my spare time (yes – I have figured out how to have a life outside of SharePoint – only took 3 years!!) I read, have started to get myself back into decent shape, and intend to spend a significant amount of time outside this summer.

You should follow Greg on Twitter