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!

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!

• javascript
• jquery
• html

5 Answers 5

Replace the labels contents with just the checkbox.

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

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

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

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>

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./Manipulation/remove#expr