How to hide a field AND it's label based on another field ?

[Jamie McCarter]

I am trying to hide a field and it's label based on the value selected from another field. My code works great for hiding the field but it does not hide the partner label.

Details....

JIRA version 4.4.5

Field from which the value is selected that determines the action... Name: Courses | ID: 10684 | Value: Other - Enter details of course below.

Field that should be hidden if the value above is not selected... Name: Other Course Name | ID: 10712

Here is the code added to the description field of field ID 10684 that works great for hiding the field but leaves the label still visible:

<script type="text/javascript">
  courses = document.getElementById("customfield_10684");
  if (courses) {
      target = document.getElementById("customfield_10712");

      if (courses.value != 'Other - Enter details of course below.') target.style.display='none';
  
      courses.onchange=function() {
          if (this.value == 'Other - Enter details of course below.') {             
                     target.style.display = '';
                     target.value="Enter course name";
                  } else {
                 target.style.display='none';
          }
      }
  }
 </script>

Here is the source code from a browser for field ID 10712 that hides with the above code but leaves the label viewable:

<div class="field-group" >
<label for="customfield_10712">Other Course Name</label>
<input class="textfield text long-field" id="customfield_10712" name="customfield_10712" maxlength="254" type="text" value="" />

Any idea as to how I can modify the code to also hide the label?

[Jamie McCarter · Accepted solution]

I have solved the issue with the following code:

<script type="text/javascript">

jQuery(document).ready(function($) {
    JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e,context) {             
                callShowHideFunctions();
            });
                callShowHideFunctions();
             
function callShowHideFunctions(){
                showHidefields();
            $('#customfield_10684').change(function() {     
                showHidefields();
            }); 
}               
         
    function showHidefields(){  
                      
                                       $('#customfield_10712').closest('div.field-group').hide();              
                    if($("#customfield_10684 option:selected").text() == 'Other - Enter details of course below.'){                        
                       $('#customfield_10712').closest('div.field-group').show();                      
                    }else{
                       $('#customfield_10712').val('');
                       $('#customfield_10712').closest('div.field-group').hide();
                    }
        }                
     
});
</script>

[RambanamP]

try with following code to show/hide fields

AJS.$("#customfield_10684").closest('div.field-group').hide();
AJS.$("#customfield_10684").closest('div.field-group').show();

[Jamie McCarter]

I added that code to the existing I had and it completely removed the field from which the value is selected that determines the action (field 10684). It also had no effect on the field that I want hidden (field 10712) when the right value is selected from field 10684.