jQuery - Déclenchement d'un événement lorsqu'un élément est supprimé du DOM

Question

J'essaie de comprendre comment exécuter un code js lorsqu'un élément est supprimé de la page :

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

Y a-t-il un événement adapté pour cela, quelque chose comme :

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

Answer 1

Vous pouvez utiliser Événements spéciaux jQuery pour ça.

En toute simplicité,

Mise en place :

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

Uso:

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

Addendum pour répondre aux commentaires de Pierre et DesignerGuy :

Pour que le rappel ne soit pas déclenché lors de l'appel $('.thing').off('destroyed') changez la condition if en : if (o.handler && o.type !== 'destroyed') { ... }

Answer 2

Je viens de vérifier, c'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 : Il s'agit d'une fonctionnalité de Jquery UI script (pas JQuery), donc vous devez charger les deux scripts (jquery et jquery-ui) pour que cela fonctionne. Voici un exemple : http://jsfiddle.net/72RTz/

Answer 3

Vous pouvez vous lier à l'événement DOMNodeRemoved (partie de DOM Level 3 WC3 spec).

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

Exemple :

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

Vous pouvez également recevoir une notification lors de l'insertion d'éléments en liant les données à l'adresse suivante DOMNodeInserted

Answer 4

Il n'existe pas d'événement intégré pour la suppression des éléments, mais vous pouvez en créer un en simulant une extension de la méthode de suppression par défaut de jQuery. Notez que le callback doit être appelé avant la suppression effective de l'élément pour conserver la référence.

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

---

Note : certains problèmes liés à cette réponse ont été soulignés par d'autres posteurs.

1. Cela ne fonctionnera pas si le nœud est supprimé par l'intermédiaire de la fonction html() replace() ou d'autres méthodes jQuery
2. Cet événement fait des bulles
3. jQuery UI supprime également les surcharges.

La solution la plus élégante à ce problème semble être : https://stackoverflow.com/a/10172676/216941

Answer 5

Accrochage .remove() n'est pas la meilleure façon de gérer cette situation, car il existe de nombreuses façons de supprimer des éléments de la page (par exemple, en utilisant la fonction .html() , .replace() etc).

Afin d'éviter divers risques de fuite de mémoire, en interne, jQuery essaiera d'appeler la fonction jQuery.cleanData() pour chaque élément retiré, quelle que soit la méthode utilisée pour le retirer.

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

Donc, pour de meilleurs résultats, vous devriez accrocher le cleanData qui est exactement ce que le jquery.event.destroyed Le plugin le fait :

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