Форум

ixiz · #1 (**permalink**) 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 · #2 (**permalink**) 12.12.2023, 14:25

Сообщение от ixiz

tagcontent === ''

В твоем случае tagcontent это строка...

Удалять нужно элемент

document.getElementsByClassName('one-col__item','two-cols__item')[0]

ruslan_mart · #3 (**permalink**) 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 · #4 (**permalink**) 12.12.2023, 14:38

Сообщение от ksa

В твоем случае tagcontent это строка...

Удалять нужно элемент

document.getElementsByClassName('one-col__item','two-cols__item')[0]

Спасибо, буду думать дальше.

ixiz · #5 (**permalink**) 12.12.2023, 14:39

Сообщение от ruslan_mart

Можете скрыть пустые элементы через 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 пустые теги не удалились.

рони · #6 (**permalink**) 12.12.2023, 16:52

Сообщение от ixiz

К сожалению, ваш метод не сработал, из html пустые теги не удалились.

значит теги не пустые, а с пропусками.

рони · #7 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript