how to hide div for unauthored parsys

[SudarshanV1]

<div class="xyz-subscribe xyz-container xyz-social">
    <sly data-sly-resource="${'xyzsubscribeshare' @ resourceType='wcm/foundation/components/responsivegrid'}"/>
</div>

i have this code to add two components, 
while authoring, authors are adding components without authoring due to it, we can see additional div's are showing in published page.
how to avoid it?

[giuseppebaglio · Accepted solution]

hi @SudarshanV1, 

This removes the outer wrapper div but does not stop authors from adding components:

<sly data-sly-resource="${'xyzsubscribeshare' 
    @ resourceType='wcm/foundation/components/responsivegrid', decoration=false}"/>

Below is the standard and clean AEM pattern for hide component on Publish if required fields are missing by using a Sling Model method like isConfigured() + HTL conditional rendering.
Create Sling Model with isConfigured() method:

package com.xyz.core.models;

import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;

@Model(
    adaptables = Resource.class,
    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL
)
public class SubscribeShareChildModel {

    @ValueMapValue
    private String title;

    @ValueMapValue
    private String link;

    public String getTitle() {
        return title;
    }

    public String getLink() {
        return link;
    }

    /** 
     * Component should render only if required fields are filled 
     */
    public boolean isConfigured() {
        return title != null && !title.isEmpty()
            && link != null && !link.isEmpty();
    }
}

Then use isConfigured() in HTL to hide the component:

<sly data-sly-use.model="com.xyz.core.models.SubscribeShareChildModel" data-sly-test="${model.configured}">
    <!-- Render component only when configured correctly -->
    <div class="subscribe-share">
        <h3>${model.title}</h3>
        <a href="${model.link}">Subscribe</a>
    </div>
</sly>

<sly data-sly-test="${!model.configured && wcmmode.edit}">
    <div class="cq-placeholder">Component not configured</div>
</sly>

When the component is not configured, nothing appears on Publish, no empty divs, no layout pollution.