I have the following code:

<div>
<label for="fsc_name1">Name:<span class="required"> *</span></label>
</div>

<div>
<input style="text-align:left; margin:0;" type="text" id="fsc_name1" name="fsc_name" value=""  size="60">
</div>

It's a piece of a contact form and I need to be able to hide some of it's elements if a specific element is selected. So lets say I want to hide the two divs above. There's no id or class and I can't give them any. All I have is unique values "for="fsc_name1"" (<label>) and "id="fsc_name1"" (<input>)

I have the following code:

<div>
<label for="fsc_name1">Name:<span class="required"> *</span></label>
</div>

<div>
<input style="text-align:left; margin:0;" type="text" id="fsc_name1" name="fsc_name" value=""  size="60">
</div>

It's a piece of a contact form and I need to be able to hide some of it's elements if a specific element is selected. So lets say I want to hide the two divs above. There's no id or class and I can't give them any. All I have is unique values "for="fsc_name1"" (<label>) and "id="fsc_name1"" (<input>)

• javascript
• jquery
• html

Share Improve this question Follow asked May 16, 2013 at 8:44 Mr.BrownstoneMr.Brownstone 1111 bronze badge 3

• 2 Your question is a little bit vague. Which element are you selecting, and which would you like to hide? – billyonecan Commented May 16, 2013 at 8:47
• 2 It's really worth your time to read the jQuery API from beginning to end. It takes about 45 minutes to an hour, and it's hugely useful. – T.J. Crowder Commented May 16, 2013 at 8:47
• Mr. Brownstone - if any of our answers helped you, could you kindly mark one of them as accepted? Thanks :) – sscirrus Commented May 23, 2013 at 19:24

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 6

Easy! Just use jQuery parent(). See docs: http://api.jquery./parent/

$('#fsc_name1').parent().hide()
$('label[for="fsc_name1"]').parent().hide()

You can also bine your selectors to save space. See docs: http://api.jquery./multiple-selector/

$('#fsc_name1, label[for="fsc_name1"]').parent().hide()

You can use a mix of atttribute selector, id selector and .parent() to solve this problem

$('label[for="fsc_name1"]').parent().hide()
$('#fsc_name1').parent().hide()

For a start, id="fsc_name1" is a class selector, you can do it via

$('#fsc_name1').parent().hide();

But, I think for your scenario, you're wanting something like this...

// This can be an array of elements
var selector = 'fsc_name1';
$('label[for=' + selector + ']').parent().hide();
$('#' + selector).parent().hide();

No jQuery version:

document.querySelector('[for=fsc_name1]').parentNode.style.display = 'none';
document.querySelector('#fsc_name1').parentNode.style.display = 'none';

Please have a look on http://jsfiddle/2dJAN/31/

$('#fsc_name1').closest('div').css('border','1px solid red')
$('#fsc_name1').closest('div').prev('div').css('border','1px solid green')

Note: Exactly I am not able to understand your question. So I add the border to the div's in example. If you want to hide, instead off .css you add .hide()that will hide the div.

Let me know if you have any questions.

Use the .parent() method.

$('#fsc_name1').parent().hide();
$('label[for="fsc_name1"]').parent().hide();