CSS пустой селектор безумной логики [дубликат]

@BoltClock предоставил фантастический ответ на этот вопрос, показывая, что это (в настоящее время, т. е. работа с CSS-спецификацией 3) не может быть достигнуто только с помощью CSS.

@BoltClock отметил, что элементы, которые действительно Пустое (что является странным определением, как описано) может быть нацелено с помощью псевдоселектора :empty. Этот псевдоселектор доступен только в CSS 3 и НЕ выбирает элементы, которые имеют только пробелы в качестве содержимого.

@BoltClock заявила, что единственный способ очистить элементы, которые имеют только пробелы, как содержимое, - это исправить HTML , но это не совсем правильно. Это также может быть достигнуто благодаря внедрению Javascript.

ХРАНИТЕ В РАЗУМ! Javascript, который я предлагаю решить эту проблему, может занять очень много времени, поэтому лучший способ - очистить необработанный HTML, если это возможно. Если это невозможно, то это может работать как решение, если у вас недостаточно обширного дерева DOM.

Я пройду шаги, чтобы написать сценарий самостоятельно. ..

Прежде всего, запустите все после загрузки страницы.

Это должно быть довольно очевидно. Перед запуском скрипта необходимо убедиться, что DOM полностью загружен. Добавьте event listener для загрузки страницы:

window.addEventListener("load", cleanUpMyDOM);

... и, конечно же, до этого создайте function, называемый cleanUpMyDOM. Мы напишем остальную часть нашей логики в этой функции.

Во-вторых, собираем элементы, которые мы проверяем.

В нашем примере мы будем проверять всю DOM, но это где наш скрипт может стать ОЧЕНЬ обширным и может сделать вашу страницу невосприимчивой. Вы можете ограничить количество узлов, которые вы итерируете.

Мы можем захватить рассматриваемые узлы, используя document.querySelectorAll. Что приятно в этой функции, так это то, что она выровнят дерево DOM, и нам не придется рекурсивно регистрировать дочерние элементы каждого узла.

var nodes = document.querySelectorAll("*");

Как я уже говорил ранее, этот код будет захватывать каждый узел DOM , и это, вероятно, НЕ хорошая идея.

Например, я работаю с WordPress, а некоторые из внутренних страниц содержат в себе некоторый барахло. К счастью, это все p элементы, которые являются дочерними элементами элемента div.body, поэтому я могу изменить свой селектор на document.querySelectorAll("div.body p"), который будет выбирать только элементы p, которые являются дочерними элементами моего div.body элемента рекурсивно. Это значительно оптимизирует мой скрипт.

В-третьих, итерации узлов и поиск пустых.

Мы создадим цикл для массива nodes и проверим каждый узел в нем , Затем нам нужно будет проверить, пуст ли узел. Если он пуст, мы применим к нему класс под названием blank.

Я просто снимаю с бедра здесь, поэтому, если вы заметили ошибку в этом коде, я знаю.

for(var i = 0; i < nodes.length; i++){
    nodes[i].innerHTML = nodes[i].innerHTML.trim();
    if(!nodes[i].innerHTML)
        nodes[i].className += " blank";
}

Я уверен, что есть более чистый способ написать цикл выше, но это должно выполнить задание.

Наконец, все вам нужно сделать, это нацелить пустые элементы на ваш CSS.

Добавьте это правило в свою таблицу стилей:

.blank {
    display:none;
}

И вот он у вас есть! Все ваши «пустые» узлы были скрыты.

Для тех, кто просто хочет перейти вперед, вот готовый скрипт:

function cleanUpMyDOM(){
    var nodes = document.querySelectorAll("*");
    for(var i = 0; i < nodes.length; i++){
        nodes[i].innerHTML = nodes[i].innerHTML.trim();
        if(!nodes[i].innerHTML)
            nodes[i].className += " blank";
    }
}
window.addEventListener("load", cleanUpMyDOM);

Еще раз, если вы заметили какой-либо проблемы с моим кодом, пожалуйста, дайте мне знать в комментариях ниже.

Надеюсь, что это поможет!

PS Многие люди могут задаваться вопросом, почему вы хотели бы это сделать, так как это похоже на плохую практику. Я бы этого не сделал, но я в ситуации, когда я начинаю это рассматривать. Содержимое страниц на моем сайте создается через редактор WYSIWYG. Этот контент постоянно создается и постоянно изменяется командой по маркетингу, и я становлюсь довольно перегруженным, обрабатывая поддержку их промахов. Не моя работа по исправлению WYSIWYG-редактора WordPress (и я никогда не хочу), но я мог бы написать очень простой скрипт, который может обрабатывать некоторые из моих работ. Это определенно кажется лучшим ответом на меня, помимо обучения команды поддержки управлению их пробелами при редактировании.