jQuery - un événement Déclencheur, lorsqu'un élément est supprimé de la DOM

Viens de vérifier, il est déjà intégré dans la version actuelle de JQuery:

jQuery v1.9.1

jQuery UI - v1.10.2

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

Important: Cette fonctionnalité est de Jquery UI script (pas JQuery), de sorte que vous devez charger à la fois des scripts (jquery et jquery-ui) pour le faire fonctionner. Ici est un exemple: http://jsfiddle.net/72RTz/

OriginalL'auteur Philipp Munin

Vous pouvez lier à la DOMNodeRemoved événement (partie de DOM Niveau 3 WC3 spec).

Travaille dans IE9, dernières versions de Firefox et de Chrome.

Exemple:

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

Vous pouvez également recevoir des avis lorsque des éléments sont l'insertion par la liaison à DOMNodeInserted

OriginalL'auteur Adam

Accrochage .remove() n'est pas la meilleure façon de gérer ce qu'il y a de nombreuses façons de supprimer des éléments de la page (par exemple en utilisant .html(), .replace(), etc).

Afin de prévenir les diverses fuite de mémoire dangers, en interne jQuery vais essayer d'appeler la fonction jQuery.cleanData() pour chaque retiré élément indépendamment de la méthode utilisée pour l'enlever.

Voir cette réponse pour plus de détails: javascript fuites de mémoire

Donc, pour de meilleurs résultats, vous devriez accrocher le cleanData fonction, ce qui est exactement ce que les jquery.de l'événement.détruit plugin n':

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

OriginalL'auteur zah

Je ne pouvais pas obtenir cette réponse de travailler avec la déliaison (malgré la mise à jour voir ici), mais a été en mesure de trouver un moyen de contourner cela. La réponse était de créer une "destroy_proxy' événement spécial qui a déclenché une "détruits" de l'événement. Vous mettez l'écouteur d'événement sur les deux 'destroyed_proxy" et "détruit", puis, lorsque vous voulez vous séparer, vous venez de séparer la "détruits" de l'événement:

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++;
});

Ici est un violon

OriginalL'auteur Bill Johnston

Je ne suis pas sûr qu'il y est un événement de la poignée pour cela, vous devez conserver une copie de DOM et de comparer les DOM existant dans une sorte de boucle d'interrogation - qui pourrait être assez méchant. Firebug ne ce - si vous examinez le code HTML et d'exécuter certains DOM-changements, il met en évidence les changements en jaune dans la console de Firebug pour un court laps de temps.

Alternativement, vous pouvez créer une fonction de suppression...

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");

OriginalL'auteur Fenton

La "suppression" de l'événement à partir de jQuery fonctionne très bien, sans plus. Il pourrait être plus fiable dans le temps, à utiliser un truc tout simple, au lieu de patcher jQuery.

Juste de modifier ou d'ajouter un attribut dans l'élément que vous êtes sur le point de retirer de la DOM. Ainsi, vous pouvez déclencher une fonction de mise à jour, qui va juste ignorer les éléments sur la façon d'être détruit, avec l'attribut "do_not_count_it".

Supposons que nous avons un tableau avec des cellules correspondant aux prix, et que vous avez besoin de montrer que le dernier prix:
C'est le sélecteur pour déclencher lorsqu'un prix de la cellule est supprimée (nous avons un bouton dans chaque ligne de la table en faisant cela, non représenté ici)

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

Et voici une fonction qui trouve le dernier prix dans le tableau, ne tenant pas compte de la dernière, si elle était l'une qui a été supprimé. En effet, lors de la "suppression" de l'événement est déclenché, et lorsque cette fonction est appelée, l'élément n'est pas supprimé encore.

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

En fin de compte, la update_prices() fonctionne très bien, et après que, l'élément DOM est supprimé.

OriginalL'auteur philippe

.

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

OriginalL'auteur Matas Vaitkevicius