# Remove wrapper from module when adding to template via GUI

**URL:** <https://community.hubspot.com/t/remove-wrapper-from-module-when-adding-to-template-via-gui/42917>\
**Category:** CMS Development\
**Created:** [August 26, 2021, 12:20am UTC](https://community.hubspot.com/t/remove-wrapper-from-module-when-adding-to-template-via-gui/42917 "2021-08-26T00:20:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![actionpark](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/actionpark/32/31851_2.png) [@actionpark](https://community.hubspot.com/u/actionpark)\
**Post date:** [August 26, 2021, 12:20am UTC](https://community.hubspot.com/t/remove-wrapper-from-module-when-adding-to-template-via-gui/42917/1 "2021-08-26T00:20:41Z")

</div>

Hi,  
I have a few modules where the CSS behaves differently depending on the selector of the next direct sibling so I need to get rid of Hubspot’s outer wrapper.

I need this:

```lia-code-sample
<section class="foo"></section>
<section class="foo"></section>
<section class="bar"></section>

```

And not:

```lia-code-sample
<div class="hs_cos_wrapper"><section class="foo"></section></div>
<div class="hs_cos_wrapper"><section class="foo"></section></div>
<div class="hs_cos_wrapper"><section class="bar"></section></div>

```

I’m familiar with the no\_wrapper parameter when manually adding the module to an HTML HubL template and that works just fine in that scenario 👍:

`{% module "module_123456" path="/path/section_foo", label="Section Foo", no_wrapper=True %}`

However, I need to be able to add these modules to a blank template page via the Create Page GUI and I’m unsure how I can add the no\_wrapper parameter 👎.

For the sake of clarity, these modules are being added to a flexible\_column and not a dnd\_area so we’re not talking about the outer wrappers around dnd\_modules which I understand are necessary. I’m just talking about the hs\_cos\_wrapper.  
Thanks in advance for any help.

---

<div class="post-metadata">

**Author:** ![Indra](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/indra/32/98381_2.png) [@Indra](https://community.hubspot.com/u/Indra)\
**Post date:** [August 26, 2021, 6:38am UTC](https://community.hubspot.com/t/remove-wrapper-from-module-when-adding-to-template-via-gui/42917/2 "2021-08-26T06:38:44Z")

</div>

Hi @actionpark,

I’ve run into problems myself using the drag and drop template builder (GUI) myself so decided to go and create html templates for more controle.

I don’t think you can remove the wrapper from within the GUI with Hubl so if you want that you have to get creative. You could use some javascript / jquery to do so and [unwrap](https://api.jquery.com/unwrap/). but it will give some delay.

Some code example will be:

```lia-code-sample
$('span.hs_cos_wrapper > .hs_cos_wrapper > *:first-child').each(function(){
 $(this).unwrap();
});

```

But befor applying, what do you want accomplish because maybe there is another way around it.

---

<div class="post-metadata">

**Author:** ![actionpark](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/actionpark/32/31851_2.png) [@actionpark](https://community.hubspot.com/u/actionpark)\
**Post date:** [August 27, 2021, 2:48pm UTC](https://community.hubspot.com/t/remove-wrapper-from-module-when-adding-to-template-via-gui/42917/3 "2021-08-27T14:48:39Z")

</div>

Yea, that’s what I was afraid of. Oh well. Thanks for the feedback.  
Vanilla JS solution if anyone in the future stumbles on this post.

```lia-code-sample
let unwrap = document.querySelectorAll(".hs_cos_wrapper .unwrap");
 unwrap.forEach((el) => {
 let parent = el.parentNode;
 parent.outerHTML = parent.innerHTML;
 });

```