Hide/show div section - select option

Question

Thanks to this post I've achieved to hide a dropdown menu when a value from a selectfield it's selectd:

$(function () {
           var selectField = $('#id_type_contract'),
           verified = $('#id_mod_contracts');

        function toggleVerified(value) {
            value == 'Modification' ? verified.show() : verified.hide();
        }

        // show/hide on load based on pervious value of selectField
        toggleVerified(selectField.val());

        // show/hide on change
        selectField.change(function() {
            toggleVerified($(this).val());
        });
    });
        })(django.jQuery);

But it doesn't work as I wanted: Image , because still remains its label and 'Add' button (green cross). So, I think the best way to proceed is to hide the entire div, am I right?

html

<div class="form-row field-mod_contracts">
<div>
<label for="id_mod_contracts">Modification:</label>
<select id="id_mod_contracts" name="mod_contracts" style="display: none;">
    <option value="" selected="selected">---------</option>
    <option value="4">Contract foo</option>
    <option value="7">Contrato bar</option>
    <option value="8">contract CCCC</option>
</select><a href="/admin/app/contract/add/?_to_field=id" class="add-another" id="add_id_mod_contracts" onclick="return showAddAnotherPopup(this);"> <img src="/static/admin/img/icon_addlink.gif" width="10" height="10" alt="Add another"></a>
</div>
</div>

How could I adapt the above JavaScript function? Is there any other better option?

Answer 1

Two hide the whole input section, change:

verified = $('#id_mod_contracts');

to

verified = $('.field-mod_contracts');

Answer 2

Either do as @Aumo suggest, unless you have the class field-mod_contracts on more elements (then it would hide them all).

If so you can instead use:

verified = $('#id_mod_contracts').parent();

This will select the inner most div

or:

verified = $('#id_mod_contracts').closest('.field-mod_contracts');

This will select the outer most div