Remove wrapper from module when adding to template via GUI

[actionpark]

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:

<section class="foo"></section>
<section class="foo"></section>
<section class="bar"></section>

And not:

<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.

[actionpark]

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.

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

[Indra · Accepted solution]

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. but it will give some delay.

Some code example will be:

$('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.