Mudar elemento ao clicar no mesmo

Boa Noite.

Pessoal, é o seguinte, tenho um submit que ao ser clicado envia infos por ajax, até aí tudo ok, funcionando perfeitamente. Porém quero que ao clicar em enviar que a div na qual o mesmo está seja "trocada" por outra, exemplo:

Tenho o seguinte:

<div class="envia" style="background:green;"><input type="submit" class="submit"></div>
Após o botao submit ser clicado quero que a div "envia" se substituida por:

<div class="deleta" style="background:red;"><input type="submit" class="del"></div>
Já rodei em vário fóruns, porém a 2 dias estou tentando e não consigo resolver, já tentei coisas como:

<script type="text/javascript">
$(document).ready(function(){
$('.submit').click(function() {
 $('.envia').addClass("deleta");
});
});
</script>

Porém sem sucesso, não sei se isso interfere em algo, mas essa div somente é apresentada como efeito de hover encima de outra, alguém pode me ajudar nisso?