CODEWITHSUNDEEP
javascriptjqueryhtml
liz
liz

Reputation: 55

Hide text but not input inside a label jquery

I have a label and input outputted from the shopping cart we are using. I don't want to hack the core of the cart to change the way it outputs. So the code is thus with the input inside the label:

<div id="FormField_29" class="FormField">
    <label for="FormField_29_0"><input type="checkbox" id="FormField_29_0" name="FormField[2][29][0]" value="Yes" class="subscribeBox FormFieldOption"  /> Yes</label>
</div>

I am trying to hide the word "yes" in the label, but I can't seem to select it. It's not a sibling of the input since it's a label. And if I select parent not input it still makes the whole label with the input disappear. I tried next and it won't select it, since DOM-wise the text isn't really next... I can't use orphan since it's not an orphan being a part of label. What am I missing? Thanks!

Upvotes: 3

Views: 3390

Answers (5)

ScottE
ScottE

Reputation: 21630

This works, but there is probably a better way:

var $label = $("label[for='FormField_29_0']");
var $checkbox = $label.find("input:checkbox");
$label.html($checkbox);

Edit

Since you're removing the text, I guess you can replace the label with just the checkbox:

var $label = $("label[for='FormField_29_0']");
$label.replaceWith($label.find("input:checkbox"));

Edit

Or, if you want to leave the text in place, but just hide it (again, I'm sure there's a better way):

var $label = $("label[for='FormField_29_0']");
var $text = $('<span>' + $label.text() + '</span>').hide();
var $checkbox = $label.find("input:checkbox");
$label.empty().append($checkbox).append($text);

Upvotes: 2

ScottD
ScottD

Reputation: 304

I think your problem has to do with the fact that your input is nested inside your label tag. Using the altered html below you should be able to alter the label's text with any number of selectors such as $('.FormField label').text('');

    <div id="FormField_29" class="FormField">
    <label for="FormField_29_0">Yes</label><input type="checkbox" id="FormField_29_0" name="FormField[2][29][0]" value="Yes" class="subscribeBox FormFieldOption"  />
</div>

Upvotes: 1

Anton
Anton

Reputation: 4584

Replace the labels contents with just the checkbox.

var l = $('label[for=FormField_29_0]');
l.html(l.find('input'));

Upvotes: 5

Corey Ballou
Corey Ballou

Reputation: 43457

var $formfield = $('#FormField_29');
$formfield.find('label').html($formfield.find('label input'));

Upvotes: 1

Ty W
Ty W

Reputation: 6814

using jquery you could remove the input element from the label, prepend it to the label (adding it back in), and then hide the label.

http://docs.jquery.com/Manipulation/remove#expr

Upvotes: 0

Related Questions