Как скрыть метку раскрывающегося списка с помощью функции hide ()

Question

У меня есть 2 выпадающих списка (EmployeeType, Type) и текстовое поле (Rate), и я просто хочу скрыть «Type» и «Rate» в соответствии с выбранным значением «EmployeeType». Я сделал это без проблем для «Rate», но для «Type» только выпадающий список скрывает не метку. Может ли кто-нибудь помочь мне скрыть ярлык выпадающего меню?

<div class="control-group">
    <label class="control-label" for="Designation">Employee Type</label>
    <div class="controls">
        <select name="Designation" onchange="ajaxRate(this)" id="Designation">
            <option value="">--Select Employee Type--</option>
            <option value="Center">Center</option>
            <option value="Visiting">Visiting</option>
            <option value="Other">Other</option>
        </select>
        <span id="ajax_img3"></span>
    </div>
    <!-- designation-->
    <br/>

    <!-- 2019-03-18 Visiting Type -->
    <div class="control-group">
        <label class="control-label" for="Type">Type</label>
        <div class="controls">
            <select name="Type" id="TypeValue">
                <option value="">--Select Type--</option>
                <option value="Yes">Regular</option>
                <option value="No">Visiting</option>
            </select>
        </div>
    </div>
    <div class="control-group" id='rate'>
        <label class="control-label" for="Rate">Hourly Rate</label>
        <div class="controls">
            <input type="number" name="Rate" id='rateValue'/>
        </div>
    </div>

@include('includes.footer')
<script>
    $(document).ready(function () {
        $("#rate").hide();
        // $("#Type").hide();
    });

    function ajaxRate(x) {
        if (x.value == 'Center') {
            $("#rate").hide();
            $("#rateValue").val('0');
            $("#TypeValue").show();
        } else {
            $("#rate").show();
            $("#rateValue").val('0');
            $("#TypeValue").hide();
        }
    }

Answer 1

function ajaxRate(x) {

            if(x.value=='Center')
            {
                $("#rate").hide();
                $("#rateValue").val('0');
                $("#TypeValue").closest('div.control-group').show();
            }
            else
            {
                $("#rate").show();
                $("#rateValue").val('0');
                $("#TypeValue").closest('div.control-group').hide();
            }
}

Answer 2

$( document ).ready(function()
    {
        $("#rate").hide();
        // $("#Type").hide();
    });
    function ajaxRate(x)
    {
        if(x.value=='Center')
        {
            $("#rate").hide();
            $("#rateValue").val('0');
            $("#TypeValue").show();
    $("#TypeValue").parents(".control-group").show();
        }
        else
        {
            $("#rate").show();
            $("#rateValue").val('0');
            $("#TypeValue").hide();
$("#TypeValue").parents(".control-group").hide();
        }

}

Вы должны скрыть полный div, используя родителей, или вам нужно добавить любой id в основной div, чтобы скрыть.