CODEWITHSUNDEEP
jquery
Vinaya Maheshwari
Vinaya Maheshwari

Reputation: 575

Hide text in label using jQuery

I want to hide text "Demo" in below code using jQuery on page load

<label>
     <span class="demo_logo"></span>
     <input type="radio" name="paymentmethod" > 
     Demo
 </label>

Upvotes: 0

Views: 3517

Answers (3)

Nabin Rawat
Nabin Rawat

Reputation: 347

Finds all label containing "nabin" and hide them. Finds all label containing "john" and underlines them.

$("label:contains('nabin')").css("display", "none");
$("label:contains('john')").css("text-decoration", "underline");

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hide label</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <label>nabin</label>
  <br>
  <label>john</label>
</body>
</html>

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You can't hide the text node, but you can remove it like

$('label').contents().last().remove();

If you have to do it for more than 1 element

$('label').each(function(){
    if(this.lastChild.nodeType == 3){
        this.removeChild(this.lastChild)
    }
})

If you just want to hide it not remove then wrap it with another element and hide that element

$('label').each(function(){
    if(this.lastChild.nodeType == 3){
        $(this.lastChild).wrap('<span />').parent().hide()
    }
})

Upvotes: 1

Albzi
Albzi

Reputation: 15609

You could change your HTML and do this instead:

<span class='demo_logo'></span>
<input type='radio' id='paymentmethod' name='paymentmethod'>
<label for="paymentmethod">Demo</label>

Then use jQuery and do something like:

$('label[for=paymentmethod]').hide();

Upvotes: 0

Related Questions