CODEWITHSUNDEEP
javascriptphpjquerywordpress
Aaron
Aaron

Reputation: 87

How can i hide class contain specific value?

How can i hide a the text under class named amount using javascript or php?

<span class="amount">$0.00</span>

I tried the following but no luck

<script language="javascript">
   $(".amount:has(a:contains('$0.00'))").hide();
</script>

Upvotes: 0

Views: 141

Answers (5)

Rick Viscomi
Rick Viscomi

Reputation: 8852

Assuming jQuery based on code in original question.

Your original script was close. All you really need is:

$('.amount:contains($0.00)').hide()

Documentation: https://api.jquery.com/contains-selector/

Bonus

If you can't use jQuery, here's how to do it the old fashioned way.

Array.prototype.forEach.call(document.getElementsByClassName('amount'), function (e) {
  if (e.innerText == '$0.00') {
    e.style.display = 'none';
  }
})

Setting styles is JavaScript isn't too clean, so the better thing to do would be to set a class, with corresponding CSS to hide elements matching that class. For example e.classList.add('hidden'); and .hidden { display: none; }

Documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach (IE 9+) https://developer.mozilla.org/en-US/docs/Web/API/Element/classList (IE 10+)

Upvotes: 2

Alexander
Alexander

Reputation: 112

$(document).ready(function(){
    $(".amount:contains('$0.00')").hide();    
});

Upvotes: 0

delmalki
delmalki

Reputation: 1364

Its a lot of trouble for what you want especially if you wanna extract the numbers without the formatting.

If you control the data add a data-value to your attribute and put the raw number their such as <span class="amount" data-value='0.00'>$0.00</span> and then select it and hide it.

Upvotes: 0

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

try with this code:

var item = $(".amount");
if(item.html() === "$0.00"){
    item.hide();
}

Upvotes: 0

Rasclatt
Rasclatt

Reputation: 12505

Try something like:

<script>
// Assign object
var AmtObj  =   $(".amount");
// Get contents
var Amount  =   AmtObj.html();
// If equals '$0.00', hide
if(Amount == '$0.00') {
    AmtObj.hide();
}   
</script>

Upvotes: 0

Related Questions