jquery .remove() problems

ok. i have a dropdown menu. if i select student. an additional field should be added to the form and when i choose teacher..the student specific fields should be remove and teacher input fields should be added.. in short i want to remove #student_profile if i choose #teacher_profile, and vice versa.

heres my code:

Javascript

<script>
$(function() {
    $(".fields").hide();
    $("#role").change(function() {
        switch($(this).val()){ 
            case "3":
                $(".fields").hide().parent().find("#student_profile").show();
                .find("#teacher_profile").addClass('not-active');
                break;
            case "2":
           开发者_开发知识库     $(".fields").hide().parent().find("#teacher_profile").show();
                .find("#student_profile").addClass('not-active');

                break;
            }
        });
    });   
    $('#submit').click(function(){
    $('div').remove('.not-active');
    });
</script>

html form

<form action="add" method="post"/>

<h3><a href="#">User</a></h3>
<div><input id="username" name="username"/></div>
<div><label for="password">Password </label> <input name="password" type="password"/></div>
div><label for="role">Role </label>
<select id="role" name="role" class="medium">
<optgroup label="Type of User">
<option value="3" />Student
<option value="2" />Teacher
 </optgroup>
</select>
</div>

<div id="student_profile" class="fields">
<div class="field">
<label for="type">Course</label>
<select id="type" name="stdntCourse" class="medium">
<optgroup  label="Choose Course">
<option value="BS IT" />BS IT
<option value="BS CS" />BS CS
<option value="BS IS" />BS IS
</optgroup>
</select>
</div>
</div>
<div id="teacher_profile" class="fields">
<div class="field">
<label for="type">Department/label>
<select id="type" name="stdntCourse" class="medium">
<optgroup  label="Choose Course">
<option value="BS IT" />cas
<option value="BS CS" />education
<option value="BS IS" />engineering
</optgroup>
</select>
</div>
</div>
<input type="submit" id="submit" value="Add User"/>
</form>

Your html code is quite a mess (invalid) (wrong nesting, wrong self closing tags etc..)

<form action="add" method="post">

<h3><a href="#">User</a></h3>

    <div><input id="username" name="username"/></div>
    <div>
        <label for="password">Password </label>
        <input name="password" type="password" />
    </div>
    <label for="role">Role </label>
    <select id="role" name="role" class="medium">
        <optgroup label="Type of User">
            <option value="3">Student</option>
            <option value="2">Teacher</option>
         </optgroup>
    </select>

    <div id="student_profile" class="fields">
        <div class="field">
            <label for="type">Course</label>
            <select id="type" name="stdntCourse" class="medium">
                <optgroup  label="Choose Course">
                    <option value="BS IT">BS IT</option>
                    <option value="BS CS">BS CS</option>
                    <option value="BS IS">BS IS</option>
                </optgroup>
            </select>
        </div>
    </div>
    <div id="teacher_profile" class="fields">
        <div class="field">
            <label for="type">Department</label>
            <select id="type" name="stdntCourse" class="medium">
                <optgroup  label="Choose Course">
                    <option value="BS IT">cas</option>
                    <option value="BS CS">education</option>
                    <option value="BS IS">engineering</option>
                </optgroup>
            </select>
        </div>
    </div>
    <input type="submit" id="submit" value="Add User" />

</form>

In your jquery you have some issues becaus eyou use the ; at wrong places making syntax-errors

Here is a bit simplified version

$(function() {
    $(".fields").hide();
    $("#role").change(function() {
        switch(this.value){
            case "3":
                $(".fields").hide()
                            .filter('#student_profile')
                            .show()
                            .removeClass('not-active')
                            .end()
                            .filter('#teacher_profile')
                            .addClass('not-active');
                break;
            case "2":
                $(".fields").hide()
                            .filter('#teacher_profile')
                            .show()
                            .removeClass('not-active')
                            .end()
                            .filter('#student_profile')
                            .addClass('not-active');
                break;
                    }
    }).change();

    $('#submit').click(function(){
        $('div').remove('.not-active');
    });
});   

You also need to invoke the .change() at the first time manually to initialize the form.

Working demo at http://jsfiddle.net/gaby/qTgGY/1/