Remove empty parsys divs

prabu-m 30-05-2019

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>

Accepted Solutions (1)

Accepted Solutions (1)

Arun_Patidar
MVP
31-05-2019

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();

Answers (4)

Answers (4)

prabu-m 30-05-2019

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.

Arun_Patidar
MVP
30-05-2019

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 30-05-2019

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 ?