Removing component’s auto generated div in AEM

In this blog, I will explain how can we remove extra div those are generated automatically when we use either sling:include or cq:include in our jsp.

  1. Now the question arises, can we get rid of these extra divs?
  2. Will they be generated everytime?
  3. If we can remove these extra divs, how can we do that?

In this post, I will explain all of these questions. Let’s begin with the first question-
Yes, we can remove these extra divs and it totally depends on our coding practices. Most of the time developers don’t care about these divs and write their code, but these extra divs makes our HTML bulky as the size of HTML increases, it increases network traffic and performance of our site decreases. Because of these divs most of the developers always faces CSS issues.
For removing these extra divs you have to include these lines of code in your component level. These lines are-
if(WCMMode.fromRequest(request) != WCMMode.EDIT){
        IncludeOptions.getOptions(request,true).setDecorationTagName(“”);
}

We have to import these two statement for WCMMode and includeOptions–

@page import=”com.day.cq.wcm.api.WCMMode”
@page import=”com.day.cq.wcm.api.components.IncludeOptions”

Q4). Now another question arises where to add these lines?
The best practice is that you must put these lines in your global.jsp. So that all of your project components have these lines of code available to them.
So that if you sling:include or cq:include any of these components then no extra div will be generated.
Be happy