From within a classical ASP .NET application, I'm supplying a bunch of values to a bootstrap webpage. In this web page I'm displaying the data in <div> elements:

<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>

From within a classical ASP .NET application, I'm supplying a bunch of values to a bootstrap webpage. In this web page I'm displaying the data in <div> elements:

<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>

The idea would be to hide these fields (including their labels) when the content is empty.

I can do this through .NET of course, but I was wondering if I could do this in JavaScript? The data is loaded through .NET, but the displaying should be done by the generated HTML page, at least that's how I would prefer it...

• javascript
• html
• twitter-bootstrap

• display none on div empty? – Shubham Dixit Commented May 7, 2019 at 8:25
• You want the div to look empty when the div is empty?? – Jack Bashford Commented May 7, 2019 at 8:27
• You can do it from JavaScript but the best practice to not even render these – golddragon007 Commented May 7, 2019 at 8:27
• What is your problem really, hiding a div with js is really simple, but when asp postback trigger, You will have to run the js agen. are you having a problem with asp and js or is it really simple hide – Alen.Toma Commented May 7, 2019 at 8:36
• The idea would be to hide the empty div and its associated label. So, say the Phone value is empty it should look like this: <div class="row"> <div class="col"><strong>Address</strong>:</div> <div class="col-3">Beverly Hills 90210</div> </div> – A Wandering Developer Commented May 7, 2019 at 8:41

5 Answers 5

div:empty { display: none }

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

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

Avoid using JS if CSS does the trick!

Here a simple script that you can achieve it:

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>

This 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.

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>

It took a bit of tinkering but I found a solution in the end. I needed to slightly modify Ali's answer to get it working but in the end...

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

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

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

Setting .style.display = 'none' ended up having some elements shifting to the right, messing up the layout of the page. By setting .style.visibility = 'hidden' I got the desired effect.

I implemented the code, and it works, but...

The site is multilingual, so everything can be displayed in up to 8 languages, so the tester tried the following:

• Log in language 1. Execute the new code
• Go back to the homepage
• Change the language and reexecute the code.

In some languages I still get a div with empty values. I debugged and found out that element.previousElementSibling equaled null.

I managed to fix it by adding a test on said null value:

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

With this the code works again, but... why is element.previousElementSibling suddenly null? The only difference is in the text loaded in the labels, and they don't contain any weird characters for the languages where I get the issue.