Hide text in label using jQuery

Question

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>

You can't without hiding the input... but you can wrap the text in another element and then hide it... or you can remove the text node itself — Arun P Johny, Feb 26 '15 at 12:05
Here is an answer: http://stackoverflow.com/questions/15196630/hide-text-node-in-element-but-not-children — lshettyl, Feb 26 '15 at 12:09

score 1 · Answer 1 · answered Feb 26 '15 at 12:09

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()
    }
})

score 0 · Answer 2 · answered Feb 26 '15 at 12:09

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

score 0 · Answer 3 · answered Jun 18 '20 at 05:44

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>

Hide text in label using jQuery

3 Answers3