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>
3 Answers
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()
}
})
Comments
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();
Comments
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>
$('label').contents().last().remove()