Estou tentando descobrir como executar algum código js quando um elemento é removido da página:

jQuery('#some-element').remove(); // remove some element from the page
/* need to figure out how to independently detect the above happened */

existe um evento feito para isso, algo como:

jQuery('#some-element').onremoval( function() {
    // do post-mortem stuff here
});

obrigado.

Apenas verificado, ele já está embutido na versão atual do JQuery:

jQuery - v1.9.1

UI do jQuery - v1.10.2

$("#myDiv").on("remove", function () {
    alert("Element was removed");
})

Importante : Essa é a funcionalidade do script da interface do usuário do Jquery (não do JQuery), portanto, você deve carregar os dois scripts (jquery e jquery-ui) para fazê-lo funcionar. Aqui está um exemplo: http://jsfiddle.net/72RTz/

Você pode usar eventos especiais do jQuery para isso.

Com toda a simplicidade,

Configuração:

(function($){
  $.event.special.destroyed = {
    remove: function(o) {
      if (o.handler) {
        o.handler()
      }
    }
  }
})(jQuery)

Uso:

$('.thing').bind('destroyed', function() {
  // do stuff
})

Adendo para responder aos comentários de Pierre e DesignerGuy:

Para não ativar o retorno de chamada durante a chamada $('.thing').off('destroyed'), altere a condição if para:if (o.handler && o.type !== 'destroyed') { ... }

Você pode vincular ao evento DOMNodeRemoved (parte da especificação WC3 do nível 3 do DOM).

Funciona no IE9, versões mais recentes do Firefox e Chrome.

Exemplo:

$(document).bind("DOMNodeRemoved", function(e)
{
    alert("Removed: " + e.target.nodeName);
});

Você também pode receber uma notificação quando elementos são inseridos vinculando-os a DOMNodeInserted

Não há evento interno para remover elementos, mas você pode criar um usando o método de remoção padrão do jQuery de extensão falsa. Observe que o retorno de chamada deve ser chamado antes de removê-lo para manter a referência.

(function() {
    var ev = new $.Event('remove'),
        orig = $.fn.remove;
    $.fn.remove = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();

$('#some-element').bind('remove', function() {
    console.log('removed!');
    // do pre-mortem stuff here
    // 'this' is still a reference to the element, before removing it
});

// some other js code here [...]

$('#some-element').remove();

Nota: alguns problemas com esta resposta foram descritos por outros pôsteres.

1. Isso não funcionará quando o nó for removido via html() replace()ou outros métodos jQuery
2. Este evento borbulha
3. As substituições de UI do jQuery também removem

A solução mais elegante para esse problema parece ser: https://stackoverflow.com/a/10172676/216941

Hooking .remove()não é a melhor maneira de lidar com isso, pois há muitas maneiras para remover elementos da página (por exemplo, usando .html(), .replace(), etc).

Para evitar vários riscos de vazamento de memória, o jQuery internamente tentará chamar a função jQuery.cleanData()para cada elemento removido, independentemente do método usado para removê-lo.

Consulte esta resposta para obter mais detalhes: vazamentos de memória javascript

Portanto, para obter melhores resultados, você deve conectar a cleanDatafunção, que é exatamente o que o plugin jquery.event.destroyed faz:

http://v3.javascriptmvc.com/jquery/dist/jquery.event.destroyed.js

Para quem usa jQuery UI:

jQuery UI tem substituído alguns dos métodos do jQuery para implementar um removeevento que será tratado não só quando você remover explicitamente o elemento dado, mas também se o elemento é removido do DOM por quaisquer métodos jQuery auto-limpeza (por exemplo replace, html, etc.) . Isso basicamente permite que você coloque um gancho nos mesmos eventos que são acionados quando o jQuery está "limpando" os eventos e dados associados a um elemento DOM.

John Resig indicou que está aberto à ideia de implementar este evento em uma versão futura do núcleo do jQuery, mas não tenho certeza de onde ele está atualmente.

Somente o jQuery é necessário (nenhuma interface do usuário do jQuery é necessária)

( Eu extraí esta extensão da estrutura da interface do usuário do jQuery )

Funciona com: empty()e html()eremove()

$.cleanData = ( function( orig ) {
    return function( elems ) {
        var events, elem, i;
        for ( i = 0; ( elem = elems[ i ] ) != null; i++ ) {
            try {

                // Only trigger remove when necessary to save time
                events = $._data( elem, "events" );
                if ( events && events.remove ) {
                    $( elem ).triggerHandler( "remove" );
                }

            // Http://bugs.jquery.com/ticket/8235
            } catch ( e ) {}
        }
        orig( elems );
    };
} )( $.cleanData );

Com esta solução, você também pode desvincular o manipulador de eventos.

$("YourElemSelector").off("remove");

Tente! - Exemplo

$.cleanData = (function(orig) {
  return function(elems) {
    var events, elem, i;
    for (i = 0;
      (elem = elems[i]) != null; i++) {
      try {

        // Only trigger remove when necessary to save time
        events = $._data(elem, "events");
        if (events && events.remove) {
          $(elem).triggerHandler("remove");
        }

        // Http://bugs.jquery.com/ticket/8235
      } catch (e) {}
    }
    orig(elems);
  };
})($.cleanData);


$("#DivToBeRemoved").on("remove", function() {
  console.log("div was removed event fired");
});

$("p").on("remove", function() {
  console.log("p was removed event fired");
});

$("span").on("remove", function() {
  console.log("span was removed event fired");
});

// $("span").off("remove");

$("#DivToBeRemoved").on("click", function() {
  console.log("Div was clicked");
});

function RemoveDiv() {
  //       $("#DivToBeRemoved").parent().html("");    
  $("#DivToBeRemoved").remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>OnRemove event handler attached to elements `div`, `p` and `span`.</h3>
<div class="container">
  <br>
  <button onclick="RemoveDiv();">Click here to remove div below</button>
  <div id="DivToBeRemoved">
    DIV TO BE REMOVED 
    contains 1 p element 
    which in turn contains a span element
    <p>i am p (within div)
      <br><br><span>i am span (within div)</span></p>
  </div>
</div>

Demonstração Adicional - jsBin

Não consegui que esta resposta funcionasse com a desobstrução (apesar da atualização, veja aqui ), mas consegui descobrir uma maneira de contorná-la. A resposta foi criar um evento especial 'destroy_proxy' que acionou um evento 'destruído'. Você coloca o ouvinte de evento em 'destroyed_proxy' e 'destroyed', e quando você deseja desvincular, basta desassociar o evento 'destroyed':

var count = 1;
(function ($) {
    $.event.special.destroyed_proxy = {
        remove: function (o) {
            $(this).trigger('destroyed');
        }
    }
})(jQuery)

$('.remove').on('click', function () {
    $(this).parent().remove();
});

$('li').on('destroyed_proxy destroyed', function () {
    console.log('Element removed');
    if (count > 2) {
        $('li').off('destroyed');
        console.log('unbinded');
    }
    count++;
});

Aqui está um violino

Eu gosto da resposta do mtkopone usando eventos especiais do jQuery, mas observe que ele não funciona a) quando elementos são desanexados em vez de removidos ou b) quando algumas bibliotecas antigas não-jquery usam innerHTML para destruir seus elementos

Não tenho certeza de que exista um identificador de evento para isso, então você teria que manter uma cópia do DOM e comparar com o DOM existente em algum tipo de loop de pesquisa - o que poderia ser bastante desagradável. O Firebug faz isso - se você inspeciona o HTML e executa algumas alterações no DOM, destaca as alterações em amarelo no console do Firebug por um curto período de tempo.

Como alternativa, você pode criar uma função de remoção ...

var removeElements = function(selector) {
    var elems = jQuery(selector);

    // Your code to notify the removal of the element here...
    alert(elems.length + " elements removed");

    jQuery(selector).remove();
};

// Sample usage
removeElements("#some-element");
removeElements("p");
removeElements(".myclass");

Isto é como criar um ouvinte de remoção ao vivo do jQuery :

$(document).on('DOMNodeRemoved', function(e)
{
  var $element = $(e.target).find('.element');
  if ($element.length)
  {
    // do anything with $element
  }
});

Ou:

$(document).on('DOMNodeRemoved', function(e)
{
  $(e.target).find('.element').each(function()
  {
    // do anything with $(this)
  }
});

O evento "remove" do jQuery funciona bem, sem adição. Pode ser mais confiável na hora de usar um truque simples, em vez de aplicar o patch do jQuery.

Basta modificar ou adicionar um atributo no elemento que você está prestes a remover do DOM. Assim, você pode acionar qualquer função de atualização, que apenas ignorará os elementos a serem destruídos, com o atributo "do_not_count_it".

Suponha que tenhamos uma tabela com células correspondentes aos preços e que você precise mostrar apenas o último preço: este é o seletor a ser acionado quando uma célula de preço for excluída (temos um botão em cada linha da tabela, não mostrado aqui)

$('td[validity="count_it"]').on("remove", function () {
    $(this).attr("validity","do_not_count_it");
    update_prices();
});

E aqui está uma função que encontra o último preço na tabela, sem levar em conta o último, se foi o que foi removido. De fato, quando o evento "remover" é acionado e quando essa função é chamada, o elemento ainda não foi removido.

function update_prices(){
      var mytable=$("#pricestable");
      var lastpricecell = mytable.find('td[validity="count_it"]').last();
}

No final, a função update_prices () funciona bem e, depois disso, o elemento DOM é removido.

referenciando a resposta @ David:

Quando você deseja fazer isso com outra função, por exemplo. html () como no meu caso, não se esqueça de adicionar retorno na nova função:

(function() {
    var ev = new $.Event('html'),
        orig = $.fn.html;
    $.fn.html = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();

Este.

$.each(
  $('#some-element'), 
        function(i, item){
            item.addEventListener('DOMNodeRemovedFromDocument',
                function(e){ console.log('I has been removed'); console.log(e);
                })
         })

uma extensão da resposta de Adam, caso você precise prever o padrão, aqui está uma solução alternativa:

$(document).on('DOMNodeRemoved', function(e){
        if($(e.target).hasClass('my-elm') && !e.target.hasAttribute('is-clone')){
            let clone = $(e.target).clone();
            $(clone).attr('is-clone', ''); //allows the clone to be removed without triggering the function again

            //you can do stuff to clone here (ex: add a fade animation)

            $(clone).insertAfter(e.target);
            setTimeout(() => {
                //optional remove clone after 1 second
                $(clone).remove();
            }, 1000);
        }
    });

Também podemos usar DOMNodeRemoved:

$("#youridwhichremoved").on("DOMNodeRemoved", function () {
// do stuff
})