Ich versuche herauszufinden, wie man js-Code ausführt, wenn ein Element von der Seite entfernt wird:

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

Gibt es eine Veranstaltung, die darauf zugeschnitten ist?

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

Vielen Dank.

Gerade überprüft, ist es bereits in der aktuellen Version von JQuery integriert:

jQuery - v1.9.1

jQuery UI - v1.10.2

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

Wichtig : Dies ist die Funktionalität des Jquery-UI- Skripts (nicht von JQuery). Sie müssen also beide Skripte (jquery und jquery-ui) laden, damit es funktioniert. Hier ist ein Beispiel: http://jsfiddle.net/72RTz/

Hierfür können Sie jQuery-Sonderereignisse verwenden .

In aller Einfachheit,

Konfiguration:

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

Verwendung:

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

Nachtrag zur Beantwortung der Kommentare von Pierre und DesignerGuy:

Um den Rückruf beim Aufrufen nicht auszulösen $('.thing').off('destroyed'), ändern Sie die if-Bedingung in:if (o.handler && o.type !== 'destroyed') { ... }

Sie können an das DOMNodeRemoved-Ereignis binden (Teil der DOM Level 3 WC3-Spezifikation).

Funktioniert in IE9, den neuesten Versionen von Firefox und Chrome.

Beispiel:

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

Sie können auch eine Benachrichtigung erhalten, wenn Elemente eingefügt werden, indem Sie an binden DOMNodeInserted

Es gibt kein integriertes Ereignis zum Entfernen von Elementen, aber Sie können eines erstellen, indem Sie die Standard-Entfernungsmethode von jQuery fälschlicherweise erweitern. Beachten Sie, dass der Rückruf aufgerufen werden muss, bevor er tatsächlich entfernt wird, um die Referenz beizubehalten.

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

Hinweis: Einige Probleme mit dieser Antwort wurden von anderen Postern beschrieben.

1. Dies funktioniert nicht, wenn der Knoten über html() replace()oder andere jQuery-Methoden entfernt wird
2. Dieses Ereignis sprudelt
3. jQuery UI überschreibt auch das Entfernen

Die eleganteste Lösung für dieses Problem scheint zu sein: https://stackoverflow.com/a/10172676/216941

Anspannen .remove()ist nicht der beste Weg , dies zu handhaben, da es viele Möglichkeiten gibt , Elemente von der Seite zu entfernen (zB durch Verwendung .html(), .replace()usw.).

Um verschiedene Gefahren für Speicherverluste zu vermeiden, versucht jQuery intern, die Funktion jQuery.cleanData()für jedes entfernte Element aufzurufen, unabhängig von der Methode, mit der es entfernt wurde.

Weitere Informationen finden Sie in dieser Antwort: Javascript-Speicherlecks

Um die besten Ergebnisse zu erzielen , sollten Sie die cleanDataFunktion einbinden. Genau das macht das Plugin jquery.event.destroyed :

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

Für diejenigen, die die jQuery-Benutzeroberfläche verwenden:

jQuery UI hat einige der jQuery - Methoden außer Kraft gesetzt ein implementieren removeEreignis , das nicht nur behandelt wird , wenn Sie explizit das gegebene Element entfernen, sondern auch , wenn das Element wird aus dem DOM durch irgendwelche selbstreinig jQuery Methoden entfernt (zB replace, htmlusw.) . Auf diese Weise können Sie im Grunde genommen dieselben Ereignisse einbinden, die ausgelöst werden, wenn jQuery die mit einem DOM-Element verknüpften Ereignisse und Daten "bereinigt".

John Resig hat angedeutet, dass er offen für die Idee ist, dieses Ereignis in einer zukünftigen Version von jQuery Core zu implementieren, aber ich bin mir nicht sicher, wo es derzeit steht.

Es ist nur jQuery erforderlich (keine jQuery-Benutzeroberfläche erforderlich)

( Ich habe diese Erweiterung aus dem jQuery-UI-Framework extrahiert. )

Funktioniert mit: empty()und html()undremove()

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

Mit dieser Lösung können Sie auch den Event-Handler aufheben .

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

Versuch es! - Beispiel

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

Zusätzliche Demo - jsBin

Ich konnte diese Antwort nicht zum Aufheben der Bindung verwenden (trotz des hier gezeigten Updates ), konnte aber einen Weg finden, um sie zu umgehen. Die Antwort war, ein spezielles Ereignis "destroy_proxy" zu erstellen, das ein "zerstörtes" Ereignis auslöste. Sie setzen den Ereignis-Listener sowohl auf 'destroy_proxy' als auch auf 'destroy'. Wenn Sie dann die Bindung aufheben möchten, lösen Sie einfach die Verbindung zwischen dem "zerstörten" Ereignis:

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

Hier ist eine Geige

Ich mag die Antwort von mtkopone mit jQuery-Sonderereignissen, aber beachte, dass es nicht funktioniert, a) wenn Elemente getrennt statt entfernt werden oder b) wenn einige alte Nicht-jquery-Bibliotheken innerHTML verwenden, um Ihre Elemente zu zerstören

Ich bin mir nicht sicher, ob es dafür ein Ereignishandle gibt. Sie müssten also eine Kopie des DOM aufbewahren und in einer Art Abfrageschleife mit dem vorhandenen DOM vergleichen - was ziemlich unangenehm sein könnte. Firebug tut dies jedoch - wenn Sie den HTML-Code überprüfen und einige DOM-Änderungen ausführen, werden die Änderungen in der Firebug-Konsole für kurze Zeit gelb hervorgehoben.

Alternativ können Sie eine Entfernungsfunktion erstellen ...

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

So erstellen Sie einen jQuery Live Listener zum Entfernen :

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

Oder:

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

Das Ereignis "remove" aus jQuery funktioniert ohne Zusatz einwandfrei. Es könnte mit der Zeit zuverlässiger sein, einen einfachen Trick zu verwenden, anstatt jQuery zu patchen.

Ändern oder fügen Sie einfach ein Attribut in dem Element hinzu, das Sie aus dem DOM entfernen möchten. Somit können Sie mit dem Attribut "do_not_count_it" jede Aktualisierungsfunktion auslösen, die Elemente auf dem Weg zur Zerstörung einfach ignoriert.

Angenommen, wir haben eine Tabelle mit Zellen, die den Preisen entsprechen, und Sie müssen nur den letzten Preis anzeigen: Dies ist der Selektor, der ausgelöst wird, wenn eine Preiszelle gelöscht wird (in jeder Zeile der Tabelle befindet sich eine Schaltfläche, die dies nicht anzeigt) Hier)

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

Und hier ist eine Funktion, die den letzten Preis in der Tabelle findet, ohne den letzten zu berücksichtigen, wenn dieser entfernt wurde. In der Tat wird das Element noch nicht entfernt, wenn das Ereignis "Entfernen" ausgelöst wird und wenn diese Funktion aufgerufen wird.

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

Am Ende funktioniert die Funktion update_prices () einwandfrei, und danach wird das DOM-Element entfernt.

Verweis auf @ David Antwort:

Wenn Sie dies mit einer anderen Funktion tun möchten, z. html () wie in meinem Fall, vergessen Sie nicht, return in der neuen Funktion hinzuzufügen:

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

Dies.

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

Eine Erweiterung von Adams Antwort, falls Sie die Standardeinstellung überwinden müssen. Hier ist eine Problemumgehung:

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

Wir können auch DOMNodeRemoved verwenden:

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