How to remove an html <div></div> tag from markup using Sling rewriters

[nikithak83]

We have a requirement to remove a wrapper div. We are seeing empty div tags <div class="ghost section"></div> on publishers. This is making it difficult for the UI team to target some of the tags. 

I understand that the ghost nodes are necessary on authors to enable inheritence in the future, but the problem is that we are seeing these div's on publishers as well.

We have tried the various approaches suggested, such as using "cq:noDecoration" tags which is hindering the author functionality. We tried using componentContext.setDefaultDecorationTagName(""); but this is removing all the wrapper div's and not ghost node div's specifically.

We have a custom sling rewriter used to update html based on the requirements. As far as I have observed, I see only setting/removing attributes from a particular tag, or even a new wrapper div can be added. Is there a way to remove wrapper div's using sling rewiters?

Appreciate any pointers or leads on this .

Regards,

Nikitha

[Shashi_Mulugu · Accepted solution]

@nikithak83 We too faced similar challenge, i feel instead of sling rewriter, we solutioned it by overlaying Responsive grid component and adding condition logic with support of a custom sling model

• check if the Edit mode, display all components
• Check if not edit mode,  check component resourcetype with help of model and return true of false if ghost component and skip it from rendering