Remove empty parsys divs | Community
Skip to main content
New Participant
May 30, 2019 6:25 PM UTC
Solved

Remove empty parsys divs

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.
arunpatidar
arunpatidarAccepted solution
New Participant
May 31, 2019 10:04 AM UTC

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

5 replies

arunpatidar
arunpatidarAccepted solution
New Participant
May 31, 2019 10:04 AM UTC

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

Translate
Arun Patidar
prabu-mAuthor
New Participant
May 30, 2019 8:28 PM UTC

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.

Translate
arunpatidar
New Participant
May 30, 2019 7:24 PM UTC

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

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

Or

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

Translate
Arun Patidar
prabu-mAuthor
New Participant
May 30, 2019 6:44 PM UTC

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 ?

Translate
arunpatidar
New Participant
May 30, 2019 6:34 PM UTC

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

Translate
Arun Patidar