Скрыть DIV, когда значение равно null или пусто

Вот простой скрипт, который вы можете сделать:

var divs = document.querySelectorAll('.row > div');
divs.forEach(function(element) {
   var text = element.textContent;
   if (text === '') {
    element.style.display = 'none';
   }
});

<div class = "row">
  <div class = "col"><strong>Address</strong>:</div>
  <div class = "col-3">Beverly Hills 90210</div>
  <div class = "col"><strong>Phone</strong>:</div>
  <div class = "col-7"></div>
</div>

div:empty { display: none }

Гораздо более чистый подход — просто использовать CSS. Приведенный выше стиль скроет пустые элементы div.

The :empty selector matches every element that has no children (including text nodes).

Избегайте использования JS, если CSS помогает!

Этот код будет скрывать пустые поля (включая их метки), когда содержимое будет пустым. Этот код скроет заголовок электронной почты с пустым значением.

let empty = document.querySelectorAll('.row > div');

empty.forEach(function(element) {

  if (element.textContent === '') {
    element.previousElementSibling.style.display = 'none';
    element.style.display = 'none';
  }
});

<div class = "row">
  <div class = "col"><strong>Address</strong></div>
  <div class = "col-3">Beverly Hills 90210</div>
  <div class = "col"><strong>Phone</strong>:</div>
  <div class = "col-7">+1 1 11111111</div>
  <div class = "col"><strong>Email</strong>:</div>
  <div class = "col-8"></div>
</div>

Пришлось немного повозиться, но в конце концов я нашел решение. Мне нужно было немного изменить ответ Али, чтобы он заработал, но в конце концов...

<script>
  let empty = document.querySelectorAll('.row > div');

  // Debug
  console.info("Code was run.")

  empty.forEach(function(element) {
    if (element.textContent === '') {
      element.previousElementSibling.style.visibility = 'hidden';
      element.style.visibility = 'hidden';
    }
  });
</script>

Установка .style.display = 'none' привела к смещению некоторых элементов вправо, что испортило макет страницы. Установив .style.visibility = 'hidden', я получил желаемый эффект.

Я реализовал код, и он работает, но...

Сайт многоязычный, поэтому все может отображаться на 8 языках, поэтому тестер попробовал следующее:

• Войти на языке 1. Выполнить новый код
• Вернуться на главную страницу
• Измените язык и повторите код.

В некоторых языках я все еще получаю div с пустыми значениями. Я отладил и обнаружил, что element.previousElementSibling равен нулевой.

Мне удалось это исправить, добавив тест на указанное нулевое значение:

if (element.previousElementSibling != null) {
   element.previousElementSibling.style.display = 'none';
}

С этим код снова работает, но... почему element.previousElementSibling внезапно становится нулевым? Единственная разница заключается в тексте, загруженном в метки, и они не содержат каких-либо странных символов для языков, на которых я получаю проблему.