Не выводить div если внутри него нет определенного тега, класса или ID

[grif0077]

Нужна помощь знатоков.
Существует ли в JS такой функционал, который проверяет вложенность определенного блока?
Например у меня есть блок родительский и внутри него

<div class="main">
                    <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>

</div>

Так вот - нужно прятать весь блок "main" если внутри нет тега <li> или же класса "breand" или такого же ID.
Такое вообще под силу JS? Или сразу смотреть в сторону других методов?
Заранее благодарю за ответ.

[рони]

Такое вообще под силу JS?

да

Или сразу смотреть в сторону других методов?

да

[grif0077]

да

да

Подскажите куда копать, если под силу.

[рони]

Подскажите куда копать, если под силу.

на сервере не выводить лишнее!!!
или так

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

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

[рони]

grif0077,
а где цикл для <div class="main">?

[grif0077]

grif0077,
а где цикл для <div class="main">?

Что имеется в виду под циклом?
Вот полный файл

<div class="leter-list"> 
				{assign var=s value=0}  
				<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>
				</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>

[рони]

grif0077,
мне сложно что-то добавить. браузер какой?

[grif0077]

grif0077,
мне сложно что-то добавить. браузер какой?

Опера, хром и моззила показывают одно и то же.

[рони]

grif0077,
а так

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