title: How to hide elements using javascript
body: <p>I use a 3rd party shopping module for this site and hence i cannot tinker with the sourcecode of this module.</p>
  
  <p>Everthing works fine but here is my issue.
  On the checkout option the summary contains field which are redundant and i want to hide this fields.</p>
  
  <pre><code>Discount:  GBP £0.00
  Sub total: GBP £90.00
  Shipping:  GBP £10.00
  Handling:  GBP £0.00
  Total:     GBP £100.00
  </code></pre>
  
  <p>As you see above only 3 fields have values. I want to use Javascript and hide the fields which do not have any values like "Discount", "Shipping" and "Handling".</p>
  
  <p>Here is a <a href="http://jsfiddle.net/ErtpL/1" rel="nofollow">Fiddle</a> to my code</p>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;div class="CartTotalAmountContainer"&gt;
      &lt;div class=" TotalSalesOrderDetailDiscountAmount"&gt;
          &lt;div&gt;
              &lt;label&gt; &lt;span&gt;Discount:&lt;/span&gt; 
              &lt;/label&gt;
          &lt;/div&gt;  &lt;span&gt;GBP £0.00&lt;/span&gt;
  
      &lt;/div&gt;
      &lt;div class="SubTotalAmount"&gt;
          &lt;div&gt;
              &lt;label&gt; &lt;span&gt;Sub total:&lt;/span&gt; 
              &lt;/label&gt;
          &lt;/div&gt;  &lt;span&gt;GBP £90.00&lt;/span&gt;
  
      &lt;/div&gt;
      &lt;div class="TotalShippingAmount"&gt;
          &lt;div&gt;
              &lt;label&gt; &lt;span&gt;Shipping:&lt;/span&gt; 
              &lt;/label&gt;
          &lt;/div&gt;  &lt;span&gt;GBP £10.00&lt;/span&gt;
  
      &lt;/div&gt;
      &lt;div class="TotalHandlingAmount"&gt;
          &lt;div&gt;
              &lt;label&gt; &lt;span&gt;Handling:&lt;/span&gt; 
              &lt;/label&gt;
          &lt;/div&gt;  &lt;span&gt;GBP £0.00&lt;/span&gt;
  
      &lt;/div&gt;
      &lt;div class="TotalAmount"&gt;
          &lt;div class="dnnLabel"&gt;
              &lt;label&gt; &lt;span&gt;Total:&lt;/span&gt; 
              &lt;/label&gt;
          &lt;/div&gt;  &lt;span&gt;GBP £100.00&lt;/span&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>No my logic is i can access the topcontainer of the elements by using</p>
  
  <pre><code>var X= document.getElementsByClassName("CartTotalAmountContainer");
  </code></pre>
  
  <p>but how do i access the data inside the individual spans and make the style="display:none" for their parent divs.</p>