Remove empty parsys divs | Community
Skip to main content
P
prabu-m
May 30, 2019
Solved

Remove empty parsys divs

  • May 30, 2019
  • 5 replies
  • 2010 views

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>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by arunpatidar

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

5 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
May 30, 2019

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

Arun Patidar
P
prabu-mAuthor
May 30, 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 ?

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
May 30, 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();

Arun Patidar
P
prabu-mAuthor
May 30, 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.

arunpatidar
Community Advisor
arunpatidarCommunity AdvisorAccepted solution
Community Advisor
May 31, 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();

Arun Patidar
Terms & ConditionsAccessibility statement

Loading footer...