Hide text but not input inside a label jquery

Question

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!

Anton · Accepted Answer · 2009-12-01 19:33:55Z

5

Replace the labels contents with just the checkbox.

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

answered Dec 1, 2009 at 19:33

Anton

4,5722 gold badges40 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ScottE · Accepted Answer · 2009-12-01 19:47:01Z

2

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

edited Dec 1, 2009 at 19:47

answered Dec 1, 2009 at 19:27

ScottE

21.6k19 gold badges97 silver badges131 bronze badges

1 Comment

Ty W Over a year ago

hopefully you don't need that label text again ;)

Corey Ballou · Accepted Answer · 2009-12-01 19:30:15Z

1

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

answered Dec 1, 2009 at 19:30

Corey Ballou

43.7k8 gold badges66 silver badges77 bronze badges

Comments

ScottD · Accepted Answer · 2009-12-01 19:34:18Z

1

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>

answered Dec 1, 2009 at 19:34

ScottD

3042 silver badges7 bronze badges

2 Comments

Joel Over a year ago

The OP said he didn't want to alter the cart output core.

Anton Over a year ago

The problem states clearly that the HTML output cannot be modified.

Ty W · Accepted Answer · 2009-12-01 19:26:08Z

0

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

answered Dec 1, 2009 at 19:26

Ty W

6,8245 gold badges30 silver badges37 bronze badges

Collectives™ on Stack Overflow

Hide text but not input inside a label jquery

5 Answers 5

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related