Novidades do jQuery 1.4 – #5: “Recortando” um elemento da DOM com detach()

Em mais um artigo da série que fala sobre as novidades do jQuery 1.4, vamos ver sobre uma funcionalidade que eu achei super legal, divertida, demais, animal, muito boa e útil: a função detach().

Basicamente, ela remove o elemento da árvore DOM e armazena numa variável, possibilitando o uso posterior da mesma. Se você é um jQuery modafoca, me perguntará... e a função remove(), não faz o mesmo? Nop, a função remove funciona de maneira diferente.

A função remove simplesmente remove (ohhh) o elemento, e suas referências. Ele é apagado, sem dó nem piedade. Já a nova função detach somente remove o elemento da árvore, sem remover a referência. É como recortar o elemento, e depois possibilitar que ele seja colado em outro lugar do código.

Veja um exemplo onde utilizamos a função remove:

$('.minha_div').click(function(){
    $(this).remove();
});

No exemplo acima, a div é apagada e removida da DOM. Agora, vejamos um exemplo com detach:

var elemento;
$('.detach_minha_div').click(function(){
    if(!elemento){
        elemento = $('.minha_div2').detach();
    }else{
        elemento.appendTo('.div_container');
        elemento = null;
    }
});

Attach/detach minha div

Agora, recriar elementos é para os fracos.

Até o próximo (e último) artigo da série.