jQuery – Löst ein Ereignis aus, wenn ein Element aus dem DOM entfernt wird

Question 1

Ich versuche herauszufinden, wie man einen 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, so etwas wie:

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

Question 2

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

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:

Damit der Rückruf beim Anrufen nicht ausgelöst wird $('.thing').off('destroyed')ändern Sie die if-Bedingung in: if (o.handler && o.type !== 'destroyed') { ... }

Question 3

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

jQuery – v1.9.1

jQuery-Benutzeroberfläche – v1.10.2

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

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

Question 4

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

Question 5

Es gibt kein integriertes Ereignis zum Entfernen von Elementen, aber Sie können eines erstellen, indem Sie die standardmäßige Entfernungsmethode von jQuery 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.

Dies funktioniert nicht, wenn der Knoten über entfernt wird html() replace() oder andere jQuery-Methoden

Dieses Ereignis brodelt
jQuery UI überschreibt auch das Entfernen

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

Question 6

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

Um verschiedene Gefahren durch Speicherlecks zu vermeiden, versucht jQuery intern, die Funktion aufzurufen jQuery.cleanData() für jedes entfernte Element, 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 also den Haken setzen cleanData Funktion, das ist genau das, was die jquery.event.zerstört Plugin macht:

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

Question 7

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

Die jQuery-Benutzeroberfläche hat einige der jQuery-Methoden überschrieben, um a zu implementieren remove Ereignis, das nicht nur behandelt wird, wenn Sie das angegebene Element explizit entfernen, sondern auch, wenn das Element durch selbstreinigende jQuery-Methoden (z replace, html, etc.). Auf diese Weise können Sie im Wesentlichen einen Haken in die gleichen Ereignisse setzen, die ausgelöst werden, wenn jQuery die Ereignisse und Daten, die einem DOM-Element zugeordnet sind, “bereinigt”.

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

Question 8

Nur jQuery ist erforderlich (keine jQuery-Benutzeroberfläche erforderlich)

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

Arbeitet mit: empty() und html() und remove()

$.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 das auch lösen der Eventhandler.

$("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ätzlich Demo – jsBin