Hide all span tag in html where class in applied with particular name

Hi,

I wanted to find hide all span in the html using jquery where class showHideUserSelectedCountry is applied.

<span class="approx approx-grand user-selected-aedcurrencycode showHideUserSelectedCountry" data-rate="105" style="display: block;">105</span>

Open in new window


Below is the 2 ways I tried but none of the way it is working. Please advise on the solution

var spans = document.querySelectorAll(".showHideUserSelectedCountry");
            var len = spans.length;
            for (var i = 0; i < len; i++) {
                spans[i].style.display = 'none';
            }

Open in new window


 $('span.showHideUserSelectedCountry').hide();

Open in new window

Dinesh BaliAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
do you wait dom ready mean the content of the page is available
using window.onload = function() { }
Code commented : http://jsfiddle.net/wmzucab5/1/
code uncommented, it work : http://jsfiddle.net/wmzucab5
window.onload = function() {
	var spans = document.querySelectorAll(".showHideUserSelectedCountry");
	var len = spans.length;
	for (var i = 0; i < len; i++) {
		spans[i].style.display = 'none';
	}
}

Open in new window

using : $(document).ready(function(){}) or jQuery(function($) {})
http://jsfiddle.net/wmzucab5/3/
$(document).ready(function() {
	$(".showHideUserSelectedCountry").hide();
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dinesh BaliAuthor Commented:
Thanks for your reply

Yes, I gave you code spinet as function is too big and it will be confusing.Code is already in the ready method.

If I put alert in the code then I can see the alert in the function.

I tried with the code below but the span is not hiding, Please advise,

$(".showHideUserSelectedCountry").hide();

Open in new window

leakim971PluritechnicianCommented:
what do you get in the alert?
alert( $(".showHideUserSelectedCountry").length );
$(".showHideUserSelectedCountry").hide();

Open in new window

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Dinesh BaliAuthor Commented:
In alert I am getting 1
and span is not hiding.

Please advise.

Regards,
Dinesh Bali
leakim971PluritechnicianCommented:
so :
1 - you think it is the div with the class but it's not
2 - another process hide it just after your code

what happenif you replace :
$(".showHideUserSelectedCountry").hide();
by :
$(".showHideUserSelectedCountry").remove();
Dinesh BaliAuthor Commented:
Many Thanks

.remove(); has removed the span but bring back the span on condition is not happening.

I tried to show and hide in many ways. Please see my code and commented code where you can see the ways I have used but nothing is working.

Please advise.

 
$('.user-selected-aedcurrencycode').each(function () {
                var aedrate = $(this).data('aedrate');
               var newaedrate = parseFloat(aedrate).toFixed(0).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
                $(this).html('AED ' + newaedrate);
                //alert($(".showHideUserSelectedCountry").length);
                var convertedValue = objCurrency.toCurrencyCode;
                if (convertedValue == 'AED') {
                    // $(".showHideUserSelectedCountry").remove();
                    //  $(this).style.display = 'none';
                    // $(this).css('display', 'none');
                    $(this).hide();
                } else {
                  //  $(this).addClass('showHideUserSelectedCountry');
                    // $(".showHideUserSelectedCountry").show();
                    // $(this).style.display = 'block';
                    //$(this).css('display', 'block');
                    $(this).show();
                }

Open in new window

Ram VCommented:
$( document ).ready(function() {
    if $('span').hasClass("showHideUserSelectedCountry") {
       $(".showHideUserSelectedCountry").hide();
   }
});
leakim971PluritechnicianCommented:
@Ram V your if block is useless and consume more ressources (test all spans)

well the remove TEST was to confirm another process unhide your element
maybe you can share your page to see it?
Dinesh BaliAuthor Commented:
Below code worked. But span is leaving space

Please advise

i
f (convertedValue == 'AED') {
                    $(this).css('display', 'none');
                    $(this).css('visibility', 'hidden');
                } else {
                    $(this).css('display', 'block');
                    $(this).css('visibility', 'visible');
                }

Open in new window

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.