Removing unsued divs in components

[aemFrontend]

I'm using/customizing AEM core components but they generate a bunch of unused divs, is there a way to turn these off or remove them.

Thanks

[BrianKasingli]

Hi @aemFrontend,

The automatically rendered HTML element can be controlled via Decoration Tag, out of the box behavior by AEM.

1. cq:noDecoration {boolean} : This property can be added to a component and a true value forces AEM not to generate any wrapper elements over the component.
2. cq:htmlTag node : This node can be added under a component and can have the following properties:
   • cq:tagName {String} : This can be used to specify a custom HTML tag to be used for wrapping the components instead of the default DIV element.
   • class {String} : This can be used to specify css class names to be added to the wrapper.
   • Other property names will be added as HTML attributes with the same String value as provided.

Visit Adobe's documentation about Decoration Tags here - https://docs.adobe.com/content/help/en/experience-manager-64/developing/components/decoration-tag.ht...

[aemFrontend]

@BrianKasingli 

Thanks for the quick response.

Tried the cq:noDecoration = true this method works but you cannot edit the component in the edit mode, is there another way to use/access the property in the HTL directly

[arunpatidar]

You can create a java model to check preview/publish mode and add decoration tag.

Example -

https://aemlab.blogspot.com/2018/11/aem-restrict-component-editing-and.html

[BrianKasingli]

Hello Shawn, 
Here's a quick fix, try this:
1. use cq:noDecoration

2. add custom code into HTL as follows: 

<div 
     data-sly-unwrap="${wcmmode.disabled}"
     class="section"
     style="user-select: auto;">
     <<<<YOUR_CODE_GOES_HERE>>>>
</div>

[aemFrontend]

Thanks, @BrianKasingli  but no luck I still cannot edit the component in the template

[BrianKasingli]

What does the rendered code look like after you apply this?
Try this:

// show div when in edit mode, else hide.
// I've added the section class && changed the conditional

<div 
     data-sly-unwrap="${wcmmode.edit}"
     class="section"
     style="user-select: auto;">
     <<<<YOUR_CODE_GOES_HERE>>>>
</div> 

[aemFrontend]

Finally, got back to this; found `${wcmmode.disabled}` removes the wrapper `div` in publish mode only way I was able to get it done...

<div 
     data-sly-unwrap="${wcmmode.disabled}"
     class="section"
     style="user-select: auto;">
     <<<<YOUR_CODE_GOES_HERE>>>>
</div> 

ref: http://aemconcepts.blogspot.com/2017/03/wcmmodes-aem.html