In my chart, I would like to remove some of the legend items based on a condition and I am using CSS, display none, from JS controller. Removing works fine, however, a blank space is left at the element's occupied space. Why?

As this HTML is generated dynamically, I am presenting a screenshot from the front-end, in which display: none is highlighted. I attempted to edit tags, play with CSS, in the browser, but nothing helped. The blank space remains still.

And here is the JS controller section that hides the item, but I think the issue is in HTML/CSS. Any help is appreciated.

chart: {
    //.....................................

    callback: function (chart) {


         var legendItems = document.getElementsByClassName('nv-series');

         for (var x = 0; x < legendItems.length; x++) {
                                                
             var legendItem = legendItems[x];
             var content = legendItem.textContent.trim();

             if (content.indexOf('Item 3') !== -1 || content.indexOf('Item 7') !== -1) {
                                 
                 legendItem.style.display = 'none';

              }
          }

     }
}