How to hide elements using javascript

Question

I use a 3rd party shopping module for this site and hence i cannot tinker with the sourcecode of this module.

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.

Discount:  GBP £0.00
Sub total: GBP £90.00
Shipping:  GBP £10.00
Handling:  GBP £0.00
Total:     GBP £100.00

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

Here is a Fiddle to my code

Here is my code

<div class="CartTotalAmountContainer">
    <div class=" TotalSalesOrderDetailDiscountAmount">
        <div>
            <label> <span>Discount:</span> 
            </label>
        </div>  <span>GBP £0.00</span>

    </div>
    <div class="SubTotalAmount">
        <div>
            <label> <span>Sub total:</span> 
            </label>
        </div>  <span>GBP £90.00</span>

    </div>
    <div class="TotalShippingAmount">
        <div>
            <label> <span>Shipping:</span> 
            </label>
        </div>  <span>GBP £10.00</span>

    </div>
    <div class="TotalHandlingAmount">
        <div>
            <label> <span>Handling:</span> 
            </label>
        </div>  <span>GBP £0.00</span>

    </div>
    <div class="TotalAmount">
        <div class="dnnLabel">
            <label> <span>Total:</span> 
            </label>
        </div>  <span>GBP £100.00</span>

    </div>
</div>

No my logic is i can access the topcontainer of the elements by using

var X= document.getElementsByClassName("CartTotalAmountContainer");

but how do i access the data inside the individual spans and make the style="display:none" for their parent divs.

No. The HTML is generaes dynamically. It has to hide the divs conditionally. Only if the amount is 0.00 or else display the div — MarsOne
– MarsOne, Commented Mar 18, 2014 at 13:38
If you create the list dynamically, in your loop, you can add a class if there is no value. — apohl
– apohl, Commented Mar 18, 2014 at 13:38
it is a bit easier to select elements and their children in JQuery but if you have to use vanilla javascript I think you'll have to use nodes — 13ruce1337
– 13ruce1337, Commented Mar 18, 2014 at 13:43

aksu · Accepted Answer · 2014-03-18 13:50:45Z

3

Try .querySelector:

var x = document.querySelectorAll(".CartTotalAmountContainer > div > span");

for(var i=0; i<x.length; i++) {
    if(x[i].innerHTML == "GBP £0.00") {
        x[i].style.display = "none";
    }
}

Demo!

And here's some reading for ya: https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

answered Mar 18, 2014 at 13:50

aksu

5,2365 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MarsOne Over a year ago

WOnderful... I just changed the line inside the loop to this " x[i].parentNode.style.display = "none";" and it worked as i wanted. Thanks a lot

giri-jeedigunta · Accepted Answer · 2014-03-18 14:39:46Z

Here is a complete native JS solution which works in IE8 and below: jsFiddle: http://jsfiddle.net/giri_jeedigunta/46QyE/ var outerDiv = document.getElementsByTagName('div'), cartContainer, i, j, cartInnerContent; // Since getElementsByclassName doesnt work in IE8: for(i = 0; i < outerDiv.length; i++) { if(outerDiv[i].className === 'CartTotalAmountContainer') { cartContainer = outerDiv[i]; cartInnerContent = cartContainer.getElementsByTagName('div'); break; } }



// Queryselector have limitations in IE8 and below
for(j = 0; j < cartInnerContent.length; j++) {
    if(typeof cartInnerContent[j].getElementsByTagName('span')[1] !== 'undefined') {
        var spanContent = cartInnerContent[j].getElementsByTagName('span')[1].innerHTML, 
            priceSplit = spanContent.split('£')[1].split('.')[0];
            console.log(priceSplit);

        if(parseInt(priceSplit) === 0) {
            cartInnerContent[j].style.display = 'none';
        }

    }
}

Collectives™ on Stack Overflow

How to hide elements using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related