How to give refresh in modal bootstrap after closing?

Question

When I close the modal, the changes continue until I refresh the page.

HTML:

<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <!-- CABEÇALHO -->
                        <div class="modal-header">
                            <h5 class="modal-title" id="TituloModalCentralizado">Faça seu login!</h5>
                            <span id="cadastre-se">Não tem conta? <a href="#">Cadastre-se</a> </span>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <!-- CORPO -->
                        <div class="modal-body">
                            <input type="text" class="form-control" placeholder="E-mail para recuperação de senha" id="recuperarSenha">
                            <form id="formLogin">
                                <div class="input-group form-group" >
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                                    </div>
                                    <input type="text" class="form-control" placeholder="Usuário">

                                </div>
                                <div class="input-group form-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-key"></i></span>
                                    </div>
                                    <input type="password" class="form-control" placeholder="Senha">
                                </div>
                                <a href="#" id="forgotPassword" onclick="ForgotPassword()">Esqueci minha senha</a>  
                        </form>
                        </div>
                        <!-- RODAPÉ -->
                        <div class="modal-footer">
                             <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                             <button type="button" class="btn btn-primary" id="btnVoltarLogin" onclick="BackModal()">Voltar</button>
                             <button type="button" class="btn btn-primary" id="btnEnviarEmail">Enviar</button>
                            <button type="button" class="btn btn-primary" id="btnEnterLogin" onclick="ShowConfig()">Entre</button>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

Just apply a .reset() form inside the modal and empty the field #recuperarSenha when the modal is closed, through the event hidden.bs.modal:

$('#login').on('hidden.bs.modal', function(){
   $("#formLogin")[0].reset();   // reseta o form (apaga os dados dos campos)
   $("#recuperarSenha").val(''); // apaga os dados do campo
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#login">
  Abrir modal
</button>
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <!-- CABEÇALHO -->
            <div class="modal-header">
                <h5 class="modal-title" id="TituloModalCentralizado">Faça seu login!</h5>
                <span id="cadastre-se">Não tem conta? <a href="#">Cadastre-se</a> </span>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!-- CORPO -->
            <div class="modal-body">
                <input type="text" class="form-control" placeholder="E-mail para recuperação de senha" id="recuperarSenha">
                <form id="formLogin">
                    <div class="input-group form-group" >
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                        </div>
                        <input type="text" class="form-control" placeholder="Usuário">

                    </div>
                    <div class="input-group form-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-key"></i></span>
                        </div>
                        <input type="password" class="form-control" placeholder="Senha">
                    </div>
                    <a href="#" id="forgotPassword" onclick="ForgotPassword()">Esqueci minha senha</a>  
            </form>
            </div>
            <!-- RODAPÉ -->
            <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                 <button type="button" class="btn btn-primary" id="btnVoltarLogin" onclick="BackModal()">Voltar</button>
                 <button type="button" class="btn btn-primary" id="btnEnviarEmail">Enviar</button>
                <button type="button" class="btn btn-primary" id="btnEnterLogin" onclick="ShowConfig()">Entre</button>
            </div>
        </div>
    </div>
</div>