como fazer a div restaurar suas classes?

como faço para depois de fechar uma modal, a classe que foi aplicada à ela seja excluída, ou a DIV retorne ao seu estado original?

tenho uma div para usar como mensagens de validação de formulários...

<div class="mensagem alert">
</div>

 ao submeter o formulário essa DIV é invocada usando jQuery adicionando a classe respectiva a mensagem de sucesso, info, aviso e erro...

function msg(id, tipo, conteudo)

 var tipo = (tipo == 'sucesso' ? 'alert-success' : (tipo == 'info' ? 'alert-info' : (tipo == 'aviso' ? 'alert- warning' : (tipo == 'erro' ? 'alert-danger' : alert('sucesso | info | aviso | erro')))));

 $('.fundo-janela').fadeIn('fast', function() {
 $('.mensagem').addClass(id + ' ' + tipo).html(
 '<button type="button" class="jq_msg_fechar close" id="'+id+'">×</button>' +
 conteudo
 ).fadeIn('fast');
 });
}

 e quando clico no x para fechar ele executa o fechamento desta DIV...

$('.mensagem').on('click', '.jq_msg_fechar', function() {
 var fechar_janela_msg = $(this).attr('id');
 $('.' + fechar_janela_msg).fadeOut('fast', function() {
 $('.fundo-janela').fadeOut('fast');
 });
 return false;
});

o problema é que há um outro tipo de mensagem a ser exibido a última classe permanece ativa, prejudicando a informação...

tipo se eu tentei enviar o formulário com campos vazios ele mostra uma mensagem com a classe .info informando que todos os campos devem ser preenchidos, e se eu informo um email inválido ele mostra uma mensagem com a classe .erro informando que o email é inválido, e é ai que o problema acontece, se eu preencher todos os campos ele vai me mostra a mensagem de sucesso só que com a classe .erro em vez da classe .sucesso...

alguém tem uma dica?