Problems with removeClass() - html

Question

On the front-end I'm asking the user 2 questions, the first one visible, the second will be visible depending on the firs answer. But somehow my removeClass is not working as expected (not working at all)
<div class="form-group col-md-4 md-form">
<label for="savingcontratos">Cancelamento de Contratos?</label>
<select class="mdb-select md-form" id="savingcontratos" searchable="Pesquisar">
<option value=""></option>
<option value="0">Sim</option>
<option value="1">Não</option>
</select>
</div>
<div class="form-group col-md-4 md-form invisible" id="divcontratos">
<label for="txtcontratos">Insira os contratos envolvidos</label>
<input type="text" class="form-control" id="txtcontratos" value="0">
</div>
And the functions I'm using are:
$('#savingfinanceiro').on('change',function () {
var component = $("#divfinanceiro");
makevisible($('#savingfinanceiro').val(), component);
});
function makevisible(value,component){
if (value === "0"){
component.removeClass("invisible");
}
}
Any help would be greatly appreciated.

Answer 1

as pointed out in the comments #savingfinanceiro and #divfinanceiro do not exist in your html. You must have overlooked that. In the following snippet I have fixed that. There, #savingfinanceiro, from the <select>, was changed to #savingcontratos and var component = $("#divfinanceiro");, the 'to-hide' <div> was changed to var component = $("#divcontratos");. After applying these changes your code should work as expected.
$('#savingcontratos').on('change', function() {
var component = $("#divcontratos");
makevisible($('#savingcontratos').val(), component);
});
function makevisible(value, component) {
if (value === "0") {
component.removeClass("invisible");
} else {
component.addClass("invisible");
}
}
.invisible {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-4 md-form">
<label for="savingcontratos">Cancelamento de Contratos?</label>
<select class="mdb-select md-form" id="savingcontratos" searchable="Pesquisar">
<option value=""></option>
<option value="0">Sim</option>
<option value="1">Não</option>
</select>
</div>
<div class="form-group col-md-4 md-form invisible" id="divcontratos">
<label for="txtcontratos">Insira os contratos envolvidos</label>
<input type="text" class="form-control" id="txtcontratos" value="0">
</div>
Hope this helps!