[grif0077]

var coll = document.querySelectorAll(".main");
  for (var i = 0, len = coll.length; i < len; i++) {
     coll[i].querySelector('.breand') || coll[i].remove();
  }

К сожалению не выводить лишнее не вариант пока-что, поэтому нужен временный костыль.
Ваш вариант почемe-то не работает. Я верно размещаю?

<div class="main">
                    {foreach $breands as $key->$breand}  
                    <div class="col-md-1" style="width:4%">
                        <div class="name-brands">
							<div class="letter" id="{$key}_{$key}"><a>{$key}</a></div>
                       </div>
                    </div>
             
                    <div class="col-md-11" style="width:96%">
                      {if $breand|count}
                        <div class="up-bl">
                            <ul class="list-brands">
                                 {foreach $breand as $val}
                                 {if $val->new}
                                <li class="breand" style="width: 268px;">
									<a href="catalog/{$val->category_url}{if $brand}/{$brand->url}{/if}">{$val->category_name}{if $val->percent2 != 0}<img style="margin-top: -4px;" src="https://shampoomania.ru/design/Shamp_3/images/percent2.png" />{/if}</a>{if $val->new}<b  class="new" style="margin: 0 0 0 6px;"> new</b>{/if}{if $val->id == 2211}<img style="margin-top: -4px;width:30px;" src="https://shampoomania.ru/design/Shamp_3/images/shar.png" />{/if}
								</li>
								{/if}
                        		{/foreach}
                            </ul>
                        </div>
                       {/if}
                    </div>
					{/foreach}
				</div>
				<script>
				var coll = document.querySelectorAll(".main");
				for (var i = 0, len = coll.length; i < len; i++) {
				coll[i].querySelector('.breand') || coll[i].remove();
				}
				</script>