We help IT Professionals succeed at work.

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

Dinesh Bali
Dinesh Bali asked
on
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

Comment
Watch Question

Multitechnician
Distinguished Expert 2019
Commented:
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

Author

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

leakim971Multitechnician
Distinguished Expert 2019

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

Open in new window

Author

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

Please advise.

Regards,
Dinesh Bali
leakim971Multitechnician
Distinguished Expert 2019

Commented:
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();

Author

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

Commented:
$( document ).ready(function() {
    if $('span').hasClass("showHideUserSelectedCountry") {
       $(".showHideUserSelectedCountry").hide();
   }
});
leakim971Multitechnician
Distinguished Expert 2019

Commented:
@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?

Author

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