Как удалить элемент при помощи js?

Question

[FireYT]

Не получается удалить пустой элемент <li>. Подскажите, как это сделать.

<div id="mobilemenu" class="leftside">
    	<div class="mobilemenu-v1 scroller" style="">
    		<div class="wrap">
    			<div class="menu top">
    				<ul class="top">
    				    
    				    
    				    
    				    		                <li class="catalog">
						
                            <ul class="dropdown">
								
                                
                            	                            		<li>
                    				    										
                            				<ul class="dropdown">
												<li class="menu_back"><a href="" class="black_text" rel="nofollow"><i class="fa fa-arrow-left"></i>Назад</a></li>
                 				                 
												<li>
												    
																										</li><li><a class="black_text" href="https://tent-chehol.com/avtomobilnye-tenty/avtopologi/">Автопологи</a></li>
																										
												
											     
												<li>
												    
																										</li><li><a class="black_text" href="https://tent-chehol.com/avtomobilnye-tenty/tent-na-pogruzchik/">Тент на погрузчик</a></li>
																										
												
											     
												<li>
												    
																										</li><li><a class="black_text" href="https://tent-chehol.com/avtomobilnye-tenty/tent-dlya-gruzovyh-avto/">Тенты для грузовых авто</a></li>
																										
												
											     
												<li>
												    
																										</li><li><a class="black_text" href="https://tent-chehol.com/avtomobilnye-tenty/tenty-dlya-pricepov/">Тенты для прицепов</a></li>
																										
												
											     
												<li>
												    
																										</li><li><a class="black_text" href="https://tent-chehol.com/avtomobilnye-tenty/tenty-na-musornye-kontejnery/">Тенты на мусорные контейнеры</a></li>
																										
												
											    
                            				</ul>
                            				                            		</li>
                            	                            		
                            	                            		
                            	                            		
                            	                            		
                            	                            		
                            	                            		
                            	                            		
                            	                            		
                            	                            		
                            	                            		
                            	                            		
                            	                            </ul>
		                </li>
		                		                
		                		                
		                		                    					
    					
    					    					
    					    					
    					    					
    					    					
    					    					
    					    					
    					    					
    							                
    				</ul>
    			</div>
    		</div>
    	</div>
    </div>

Answer 1

[Александр]

CSS:

li:empty {
    display: none;
}

JS 1:

document.querySelectorAll('li:empty').forEach(element => element.remove());

JS 2:

document.querySelectorAll('li').forEach(element => {
    if (element.childNodes.length === 0) {
        element.remove();
    }
});

Comments

[FireYT]

Я уже пробовал такие варианты, но он почему-то считает, что тег не пусто. Я даже уже пытался через replace заменять на пустой, но ничего не вышло.

[FireYT]

Это я чет затупил, не туда код писал.

Answer 2

[OxCom]

const els = document.querySelectorAll('#mobilemenu li');

// Array.from().forEach() можно заменить на цикл for
// for (el of Array.prototype.slice.call(els) ) { ... }
Array
    .from(els)
    .forEach(el => { el.childElementCount === 0 ? el.remove() : 0; })

Comments

[FireYT]

Чего-то тоже не работает.

[OxCom]

Возможно вы удаляете раньше, чем элемент становится пустыми? Или ваш код не был залит на прод?

Лично проверял на указанном сайте через консоль.

[Александр]

OxCom, Лучше не использовать childElementCount в данном случае, т. к. если элемент имеет текстовую ноду, то childElementCount также вернет 0.

[FireYT]

Это я чет затупил, не туда код писал

[OxCom]

Александр согласен. Можно еще hasChildNodes() использовать. Зависит от того, что автор хочет получить.