J'essaie de comprendre comment exécuter du 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é à cela, quelque chose comme:

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

Merci.

Juste vérifié, 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 : il s'agit de la fonctionnalité du script d' interface utilisateur Jquery (pas JQuery), vous devez donc charger les deux scripts (jquery et jquery-ui) pour le faire fonctionner. Voici un exemple: http://jsfiddle.net/72RTz/

Vous pouvez utiliser des événements spéciaux jQuery pour cela.

En toute simplicité,

Installer:

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

Usage:

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

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

Pour ne pas déclencher le rappel lors de l'appel $('.thing').off('destroyed'), remplacez la condition if par:if (o.handler && o.type !== 'destroyed') { ... }

Vous pouvez vous lier à l'événement DOMNodeRemoved (partie de la spécification DOM niveau 3 WC3).

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 lorsque des éléments sont insérés en se liant à DOMNodeInserted

Il n'y a pas d'événement intégré pour supprimer des éléments, mais vous pouvez en créer un en étirant la méthode de suppression par défaut de jQuery. Notez que le rappel doit être appelé avant de le supprimer 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();

Remarque: certains problèmes avec cette réponse ont été soulignés par d'autres affiches.

1. Cela ne fonctionnera pas lorsque le nœud est supprimé via html() replace() ou d'autres méthodes jQuery
2. Cet événement bouillonne
3. jQuery UI remplace également la suppression

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

Le crochet .remove()n'est pas le meilleur moyen de gérer cela, car il existe de nombreuses façons de supprimer des éléments de la page (par exemple, en utilisant .html(),.replace() etc.).

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

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

Donc, pour de meilleurs résultats, vous devez accrocher la cleanDatafonction, ce qui est exactement ce que fait le plugin jquery.event.destroyed :

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

Pour ceux qui utilisent jQuery UI:

jQuery UI a substituée quelques - unes des méthodes de jQuery pour mettre en œuvre un removeévénement qui est piloté non seulement lorsque vous supprimez explicitement l'élément donné, mais aussi si l'élément est alors retiré du DOM par toutes les méthodes jQuery auto-nettoyage (par exemple replace, htmletc.) . Cela vous permet essentiellement de mettre un crochet dans les mêmes événements qui se déclenchent lorsque jQuery "nettoie" les événements et les données associés à un élément DOM.

John Resig a indiqué qu'il était ouvert à l'idée d'implémenter cet événement dans une future version de jQuery core, mais je ne sais pas où il en est actuellement.

Seul jQuery est requis (aucune interface utilisateur jQuery requise)

( J'ai extrait cette extension du framework jQuery UI )

Fonctionne avec: empty()et html()etremove()

$.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 );

Avec cette solution, vous pouvez également dissocier le gestionnaire d'événements.

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

Essayez! - Exemple

$.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>

Démo supplémentaire - jsBin

Je n'ai pas réussi à faire fonctionner cette réponse avec la dissociation (malgré la mise à jour, voir ici ), mais j'ai réussi à trouver un moyen de la contourner. La réponse a été de créer un événement spécial «destroy_proxy» qui a déclenché un événement «détruit». Vous mettez l'écouteur d'événement à la fois sur 'destroy_proxy' et sur 'destroy', puis lorsque vous souhaitez vous dissocier, vous venez de dissocier l'événement 'destroy':

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

Voici un violon

J'aime la réponse de mtkopone en utilisant les événements spéciaux jQuery, mais notez que cela ne fonctionne pas a) lorsque les éléments sont détachés au lieu d'être supprimés ou b) lorsque certaines anciennes bibliothèques non jquery utilisent innerHTML pour détruire vos éléments

Je ne suis pas sûr qu'il existe un descripteur d'événement pour cela, vous devez donc conserver une copie du DOM et comparer au DOM existant dans une sorte de boucle d'interrogation - ce qui pourrait être assez désagréable. Firebug le fait cependant - si vous inspectez le HTML et exécutez quelques modifications DOM, il met en évidence les changements en jaune dans la console Firebug pendant une courte période.

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

Voici comment créer un écouteur de suppression en direct 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)
  }
});

L'événement "remove" de jQuery fonctionne correctement, sans ajout. Il pourrait être plus fiable à temps d'utiliser une astuce simple, au lieu de patcher jQuery.

Modifiez ou ajoutez simplement un attribut dans l'élément que vous êtes sur le point de supprimer du DOM. Ainsi, vous pouvez déclencher n'importe quelle fonction de mise à jour, qui ignorera simplement les éléments en voie d'être détruits, avec l'attribut "do_not_count_it".

Supposons que nous ayons un tableau avec des cellules correspondant aux prix et que vous ne deviez afficher que le dernier prix: il s'agit du sélecteur à déclencher lorsqu'une cellule de prix est supprimée (nous avons un bouton dans chaque ligne du tableau pour le faire, non affiché 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 du tableau, sans tenir compte du dernier, si c'est celui qui a été supprimé. En effet, lorsque l'événement "remove" est déclenché, et lorsque cette fonction est appelée, l'élément n'est pas encore supprimé.

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

Au final, la fonction update_prices () fonctionne très bien, et après cela, l'élément DOM est supprimé.

se référant à la réponse @David:

Lorsque vous voulez le faire avec une autre fonction, par exemple. html () comme dans mon cas, n'oubliez pas d'ajouter return dans une nouvelle fonction:

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

Ce.

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

une extension de la réponse d' Adam au cas où vous auriez besoin de prévaloir par défaut, voici un contournement:

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

Nous pouvons également utiliser DOMNodeRemoved:

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