Как удалить элементы, не имеющие вложенных элементов?

Question

[CreativeStory]

Например, есть структура:

<div class="color">
    <div class="red"></div>
</div>
<div class="color">
    <div class="red"></div>
</div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>

Нужно найти все элементы .color, проверить, содержат ли они в себе элементы .red, если нет - то удалить пустые .color. В итоге должно получиться так:

<div class="color">
    <div class="red"></div>
</div>
<div class="color">
    <div class="red"></div>
</div>

Answer 1

[Сергей Соколов]

document.querySelectorAll('div.color').forEach( el => {
  if (el.children.length === 0) el.parentNode.removeChild(el);
});

Comments

[CreativeStory]

Сергей, огромная вам благодарность за ответ!

[Сергей Соколов]

Только имейте в виду, что здесь не проверяется, есть ли класс red у вложенного дива. А удаляются только div'ы с классом color, у которых нет вложенных элементов вообще.

[Андрей Саныч]

только IE и Safari Mobile не знают .remove()

[Сергей Соколов]

Андрей Саныч, good point, но в вопросе не вижу списка браузеров, в которых решение обязательно должно работать.

[CreativeStory]

Сергей Соколов, а как и для сафари с IE сделать?)

[Сергей Соколов]

CreativeStory,

if (el.children.length === 0) el.parentNode.removeChild(el);