Próbuję dowiedzieć się, jak wykonać kod js, gdy element zostanie usunięty ze strony:

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

czy istnieje wydarzenie dostosowane do tego, na przykład:

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

dzięki.

Właśnie sprawdzone, jest już wbudowane w bieżącą wersję JQuery:

jQuery - v1.9.1

jQuery UI - v1.10.2

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

Ważne : Jest to funkcjonalność skryptu interfejsu użytkownika Jquery (nie JQuery), więc aby załadować oba skrypty (jquery i jquery-ui), należy go załadować. Oto przykład: http://jsfiddle.net/72RTz/

Możesz do tego użyć specjalnych wydarzeń jQuery .

W całej prostocie

Ustawiać:

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

Stosowanie:

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

Dodatek do odpowiedzi na komentarze Pierre'a i DesignerGuya:

Aby nie wywoływać wywołania zwrotnego podczas połączenia $('.thing').off('destroyed'), zmień warunek if na:if (o.handler && o.type !== 'destroyed') { ... }

Możesz powiązać ze zdarzeniem DOMNodeRemoved (część specyfikacji DOM Level 3 WC3).

Działa w IE9, najnowszych wydaniach Firefox i Chrome.

Przykład:

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

Możesz również otrzymywać powiadomienia o wstawianiu elementów przez powiązanie z DOMNodeInserted

Nie ma wbudowanego zdarzenia do usuwania elementów, ale możesz je utworzyć, stosując domyślną metodę usuwania fałszywego rozszerzenia jQuery. Pamiętaj, że wywołanie zwrotne musi zostać wywołane przed faktycznym usunięciem, aby zachować odniesienie.

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

Uwaga: niektóre problemy z tą odpowiedzią zostały nakreślone przez inne plakaty.

1. To nie zadziała, gdy węzeł zostanie usunięty za pomocą html() replace()innych metod jQuery
2. To wydarzenie pęka
3. Usunięto również interfejs użytkownika jQuery

Najbardziej eleganckim rozwiązaniem tego problemu wydaje się być: https://stackoverflow.com/a/10172676/216941

Przechwytywanie .remove()nie jest najlepszym sposobem na poradzenie sobie z tym, ponieważ istnieje wiele sposobów usuwania elementów ze strony (np. Przy użyciu .html(),.replace() itp).

Aby zapobiec różnym zagrożeniom wycieku pamięci, wewnętrznie jQuery spróbuje wywołać funkcję jQuery.cleanData()dla każdego usuniętego elementu, niezależnie od metody użytej do jego usunięcia.

Aby uzyskać więcej informacji, zobacz tę odpowiedź: wycieki pamięci javascript

Tak więc, aby uzyskać najlepsze wyniki, powinieneś podpiąć cleanDatafunkcję, która właśnie robi wtyczka jquery.event.destroyed :

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

Dla tych, którzy używają interfejsu użytkownika jQuery:

jQuery UI jest przesłonięta niektóre z metod jQuery zaimplementować removezdarzenie, które zostanie obsłużony nie tylko wtedy, gdy wyraźnie usunąć dany element, ale również wtedy, gdy element zostanie usunięty z DOM żadnymi samoczyszczących metod jQuery (np replace,html itp) . Zasadniczo pozwala to na zaczepienie tych samych zdarzeń, które są uruchamiane, gdy jQuery „oczyszcza” zdarzenia i dane powiązane z elementem DOM.

John Resig wskazał , że jest otwarty na pomysł zaimplementowania tego wydarzenia w przyszłej wersji rdzenia jQuery, ale nie jestem pewien, gdzie obecnie się znajduje.

Wymagane jest tylko jQuery (nie wymaga interfejsu użytkownika jQuery)

( Wyodrębniłem to rozszerzenie ze środowiska interfejsu użytkownika jQuery )

Działa z: empty()i html()iremove()

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

Dzięki temu rozwiązaniu możesz również odznaczyć moduł obsługi zdarzeń.

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

Spróbuj! - przykład

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

Dodatkowe demo - jsBin

Nie udało mi się uzyskać tej odpowiedzi do rozpakowania (pomimo aktualizacji, patrz tutaj ), ale udało mi się to rozwiązać. Odpowiedzią było utworzenie zdarzenia specjalnego „destroy_proxy”, które wywołało zdarzenie „zniszczone”. Umieszczasz detektor zdarzeń zarówno na „zniszczone_proxy”, jak i „zniszczone”, a następnie, gdy chcesz cofnąć powiązanie, po prostu cofnij powiązanie zdarzenia „zniszczone”:

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

Oto skrzypce

Podoba mi się odpowiedź mtkopone przy użyciu specjalnych zdarzeń jQuery, ale zauważ, że to nie działa a) gdy elementy są odłączone zamiast usuwane lub b) gdy niektóre stare biblioteki nie jquery używają innerHTML do niszczenia twoich elementów

Nie jestem pewien, czy istnieje do tego uchwyt zdarzenia, więc musiałbyś zachować kopię DOM i porównać ją z istniejącą DOM w jakiejś pętli odpytywania - co może być dość nieprzyjemne. Firebug robi to jednak - jeśli przejrzysz HTML i wykonasz kilka zmian DOM, na krótki czas podświetli zmiany na żółto w konsoli Firebug.

Alternatywnie możesz utworzyć funkcję usuwania ...

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

Oto jak utworzyć detektor jQuery na żywo :

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

Lub:

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

Zdarzenie „remove” z jQuery działa dobrze, bez dodawania. Może być bardziej niezawodne w czasie, aby zastosować prostą sztuczkę, zamiast łatania jQuery.

Po prostu zmodyfikuj lub dodaj atrybut w elemencie, który chcesz usunąć z DOM. W ten sposób można uruchomić dowolną funkcję aktualizacji, która po prostu zignoruje elementy na drodze do zniszczenia, z atrybutem „do_not_count_it”.

Załóżmy, że mamy tabelę z komórkami odpowiadającymi cenom i że musisz pokazać tylko ostatnią cenę: Jest to selektor uruchamiany po usunięciu komórki ceny (mamy przycisk w każdym wierszu tabeli, który to pokazuje, nie pokazano tutaj)

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

A tutaj jest funkcja, która znajduje ostatnią cenę w tabeli, nie biorąc pod uwagę ostatniej, jeśli to ta, która została usunięta. Rzeczywiście, po uruchomieniu zdarzenia „remove” i wywołaniu tej funkcji element nie jest jeszcze usuwany.

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

Na koniec funkcja update_prices () działa dobrze, a następnie element DOM jest usuwany.

odnosząc się do odpowiedzi @David:

Gdy chcesz to zrobić za pomocą innej funkcji, np. html () jak w moim przypadku, nie zapomnij dodać return w nowej funkcji:

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

To.

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

rozszerzenie odpowiedzi Adama, ponieważ musisz uprzedzić domyślną, oto obejście:

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

Możemy również użyć DOMNodeRemoved:

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