Remove empty parsys divs

[prabu-m]

How to remove empty div generated (<div class="col-12 col-md-8 "></div>) if parys is included with below sightly code and parsys node do not contains any child node i.e. no component dragged and dropped in parsys :

<div class="col-12 col-md-8 " data-sly-resource="${'col' @ resourceType='wcm/foundation/components/parsys'}"></div>

[arunpatidar]

you need to write a check to identify mandatory values to display div and use unwrap with test in sightly.

[prabu-m]

Existing code has the same way of including parsys at nearly 90 places, putting the check in all these places looks a bit messy.
Any other cleaner approach ?

[arunpatidar]

Then you can go with jquery to find and remove empty div when page load.

$('.common-selector-class:empty').remove();

Or

$('div:empty').remove();

[prabu-m]

This approach hides required div(s) too, like in case of image where image is loaded based on class or style attribute of an empty div. If I try to exclude the existing image classes , if a new image class gets added in code, this will break again.

[arunpatidar · Accepted solution]

To avoid this use one dummy class in empty divs e.g. req-div

<div class="img-div req-div"></div>

$('div:empty').not('.req-div').remove();