Remove unnessesessary divs in Template

Open Q&A
#1

Hi Community!
Does anyone know, how to remove these unnecessary DIV Elements (automatically generated by algolia Widgets)?

#div class="ais-RefinementList"
     #div class="ais-RefinementList-list"
         #div class="ais-RefinementList-item"
              #div

I don’t need all of them!

(I Know: I already created my custom Widget doing this well, without putting any unnecessary DIVS, but there are other problems with it. So i have to use this regular variant now)

image
image821×236 10.9 KB 

$menus['one']=instantsearch.widgets.refinementList({
              cssClasses: {             
                count: 'd-none',
              },
              templates: {
              item(item, { html }) {
                const { url, label, count, isRefined } = item;

                return html`
                  <a href="${url}" style="${isRefined ? 'font-weight: bold' : ''}">
                    <span>${label} (${count})</span>
                  </a>
                `;
              },
            }})
#2

I’m afraid if you use the default widget, you’ll get the <div>s. You can override the styling for them if you’re trying to reduce the real estate consumed by the search UI, but to remove them, you’ll need to build a custom widget.