Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Найти и удалить все теги, если в них пусто (https://javascript.ru/forum/events/85661-najjti-i-udalit-vse-tegi-esli-v-nikh-pusto.html)

ixiz 12.12.2023 14:22
Найти и удалить все теги, если в них пусто
 
<ul class="one-col">
<li class="one-col__item">Тут что-то есть</li>
<li class="one-col__item"></li>
</ul>

<ul class="two-cols">
<li class="two-cols__item">Тут что-то есть</li>
<li class="two-cols__item">Тут что-то есть</li>
<li class="two-cols__item"></li>
<li class="two-cols__item"></li>
<li class="two-cols__item">Тут что-то есть</li>
<li class="two-cols__item"></li>			
</ul>


Задача состоит в том, чтобы удалить все теги, в которых пусто.

Пока что у меня только получается найти пустые теги, но метод remove не срабатывает.

let tagcontent = document.getElementsByClassName('one-col__item','two-cols__item')[0].textContent;
if (tagcontent === '') {
	tagcontent.remove();
}

ksa 12.12.2023 14:25
Цитата:
Сообщение от ixiz 
tagcontent === ''
В твоем случае tagcontent это строка... ;)

Удалять нужно элемент
document.getElementsByClassName('one-col__item','two-cols__item')[0]

ruslan_mart 12.12.2023 14:33
Можете скрыть пустые элементы через CSS:

.one-col__item:empty, .two-cols__item:empty {
  display: none;
}


Если нужно именно удалить элементы через JS, то можно попробовать такой вариант:

document.querySelectorAll('.one-col__item:empty, .two-cols__item:empty').forEach((element) => {
   element.remove();
});

ixiz 12.12.2023 14:38
Цитата:
Сообщение от ksa (Сообщение 554225)
В твоем случае tagcontent это строка... ;)

Удалять нужно элемент
document.getElementsByClassName('one-col__item','two-cols__item')[0]
Спасибо, буду думать дальше.

ixiz 12.12.2023 14:39
Цитата:
Сообщение от ruslan_mart (Сообщение 554226)
Можете скрыть пустые элементы через CSS:

.one-col__item:empty, .two-cols__item:empty {
  display: none;
}


Если нужно именно удалить элементы через JS, то можно попробовать такой вариант:

document.querySelectorAll('.one-col__item:empty, .two-cols__item:empty').forEach((element) => {
   element.remove();
});
Надо именно из html удалить с помощью JS. К сожалению, ваш метод не сработал, из html пустые теги не удалились.

рони 12.12.2023 16:52
Цитата:
Сообщение от ixiz
К сожалению, ваш метод не сработал, из html пустые теги не удалились.
значит теги не пустые, а с пропусками.

рони 12.12.2023 16:58
ixiz,
<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>
<body>
    <ul class="one-col">
        <li class="one-col__item">Тут что-то есть</li>
        <li class="one-col__item"></li>
    </ul>
    <ul class="two-cols">
        <li class="two-cols__item">Тут что-то есть</li>
        <li class="two-cols__item">Тут что-то есть</li>
        <li class="two-cols__item"></li>
        <li class="two-cols__item"></li>
        <li class="two-cols__item">Тут что-то есть</li>
        <li class="two-cols__item"></li>
    </ul>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('[class*="__item"]').forEach((element) => {
                element.textContent.trim() || element.remove();
            });
        })
    </script>
</body>
</html>


Часовой пояс GMT +3, время: 16:37.