Your Cart

Get Amazing Offers on Scripts

Get UX Support

How to hide a div when a value is null or empty using pure css or pure javascript

A much cleaner approach is to just use CSS. The below style will hide divs which are emtpy.

div:empty { display: none }

Below code will hide the empty fields (including their labels) when the content is empty. This code will hide the email Heading with an empty value.

Javascript code

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

empty.forEach(function(element) {

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

HTML code

<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>
Leave a Reply

Your email address will not be published. Required fields are marked *

Free Worldwide shipping

On all orders above $50

Easy 30 days returns

30 days money back guarantee

International Warranty

Offered in the country of usage

100% Secure Checkout

PayPal / MasterCard / Visa