Saya mencoba mencari cara untuk mengeksekusi beberapa kode js ketika sebuah elemen dihapus dari halaman:

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

apakah ada acara yang dirancang khusus untuk itu, seperti:

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

Terima kasih.

Baru diperiksa, ini sudah ada di dalam versi JQuery saat ini:

jQuery - v1.9.1

jQuery UI - v1.10.2

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

Penting : Ini adalah fungsionalitas skrip Jquery UI (bukan JQuery), jadi Anda harus memuat kedua skrip (jquery dan jquery-ui) untuk membuatnya berfungsi. Berikut ini contohnya: http://jsfiddle.net/72RTz/

Anda dapat menggunakan acara khusus jQuery untuk ini.

Dalam semua kesederhanaan,

Mempersiapkan:

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

Pemakaian:

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

Tambahan untuk menjawab komentar Pierre dan DesignerGuy:

Agar panggilan balik tidak menyala saat memanggil $('.thing').off('destroyed'), ubah kondisi if ke:if (o.handler && o.type !== 'destroyed') { ... }

Anda dapat mengikat ke acara DOMNodeRemoved (bagian dari spesifikasi DOM Level 3 WC3).

Bekerja di IE9, rilis terbaru Firefox dan Chrome.

Contoh:

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

Anda juga bisa mendapatkan notifikasi ketika elemen memasukkan dengan mengikat DOMNodeInserted

Tidak ada acara bawaan untuk menghapus elemen, tetapi Anda dapat membuatnya dengan metode penghapusan default jQuery yang memperluas palsu. Perhatikan bahwa callback harus dipanggil sebelum benar-benar menghapusnya untuk menyimpan referensi.

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

Catatan: beberapa masalah dengan jawaban ini telah diuraikan oleh poster lain.

1. Ini tidak akan berfungsi ketika node dihapus melalui html() replace()atau metode jQuery lainnya
2. Acara ini meletus
3. Penggantian jQuery UI juga dihapus

Solusi paling elegan untuk masalah ini adalah: https://stackoverflow.com/a/10172676/216941

Hooking .remove()bukan cara terbaik untuk menangani ini karena ada banyak cara untuk menghapus elemen dari halaman (misalnya dengan menggunakan .html(), .replace(), dll).

Untuk mencegah berbagai bahaya kebocoran memori, secara internal jQuery akan mencoba memanggil fungsi jQuery.cleanData()untuk setiap elemen yang dihapus terlepas dari metode yang digunakan untuk menghapusnya.

Lihat jawaban ini untuk lebih jelasnya: kebocoran memori javascript

Jadi, untuk hasil terbaik, Anda harus mengaitkan cleanDatafungsinya, yang persis seperti yang dilakukan plugin jquery.event.destroyed :

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

Bagi mereka yang menggunakan jQuery UI:

jQuery UI telah diganti beberapa metode jQuery untuk melaksanakan removeacara yang akan ditangani tidak hanya ketika Anda secara eksplisit menghapus elemen yang diberikan, tetapi juga jika elemen akan dihapus dari DOM oleh membersihkan diri metode jQuery (misalnya replace, html, dll) . Ini pada dasarnya memungkinkan Anda untuk memasang kail ke acara yang sama yang dipecat ketika jQuery "membersihkan" acara dan data yang terkait dengan elemen DOM.

John Resig telah mengindikasikan bahwa dia terbuka untuk ide mengimplementasikan acara ini di versi inti jQuery di masa depan, tapi saya tidak yakin di mana tempatnya saat ini.

Hanya jQuery yang diperlukan (Tidak diperlukan UI jQuery)

( Saya telah mengekstrak ekstensi ini dari kerangka UI jQuery )

Bekerja dengan: empty()dan html()danremove()

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

Dengan solusi ini Anda juga dapat melepas ikatan handler acara.

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

Cobalah! - Contoh

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

Demo Tambahan - jsBin

Saya tidak bisa mendapatkan jawaban ini untuk bekerja dengan tidak mengikat (meskipun ada pembaruan lihat di sini ), tetapi saya bisa mencari jalan keluar. Jawabannya adalah untuk membuat acara khusus 'destroy_proxy' yang memicu acara 'hancur'. Anda menempatkan pendengar acara di 'hancur_proxy' dan 'dihancurkan', maka ketika Anda ingin melepaskan ikatan, Anda hanya membatalkan ikatan acara 'dihancurkan':

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

Ini biola

Saya suka jawaban mtkopone menggunakan acara khusus jQuery, tetapi perhatikan bahwa itu tidak berfungsi a) ketika elemen dilepaskan alih-alih dihapus atau b) ketika beberapa perpustakaan non-jquery lama menggunakan innerHTML untuk menghancurkan elemen Anda

Saya tidak yakin ada pegangan acara untuk ini, jadi Anda harus menyimpan salinan DOM dan membandingkannya dengan DOM yang ada di semacam jajak pendapat - yang bisa sangat tidak menyenangkan. Firebug melakukan ini - jika Anda memeriksa HTML dan menjalankan beberapa perubahan DOM, Firebug menyoroti perubahan dalam warna kuning di konsol Firebug untuk waktu yang singkat.

Atau, Anda dapat membuat fungsi hapus ...

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

Ini adalah cara membuat pendengar hapus jQuery langsung :

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

Atau:

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

Acara "hapus" dari jQuery berfungsi dengan baik, tanpa penambahan. Mungkin lebih dapat diandalkan pada waktunya untuk menggunakan trik sederhana, daripada menambal jQuery.

Cukup modifikasi atau tambahkan atribut di elemen yang akan Anda hapus dari DOM. Dengan demikian, Anda dapat memicu fungsi pembaruan apa pun, yang hanya akan mengabaikan elemen yang akan dihancurkan, dengan atribut "do_not_count_it".

Misalkan kita memiliki tabel dengan sel yang sesuai dengan harga, dan Anda hanya perlu menunjukkan harga terakhir: Ini adalah pemilih untuk memicu ketika sel harga dihapus (kami memiliki tombol di setiap baris tabel yang melakukan itu, tidak ditampilkan sini)

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

Dan di sini adalah fungsi yang menemukan harga terakhir dalam tabel, tidak memperhitungkan yang terakhir, jika itu yang dihapus. Memang, ketika acara "hapus" dipicu, dan ketika fungsi ini dipanggil, elemen tersebut belum dihapus.

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

Pada akhirnya, fungsi update_prices () berfungsi dengan baik, dan setelah itu, elemen DOM dihapus.

referensi ke jawaban @vid:

Ketika Anda ingin melakukannya dengan fungsi lain, mis. html () seperti dalam kasus saya, jangan lupa tambahkan kembali dalam fungsi baru:

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

Ini.

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

ekstensi untuk jawaban Adam jika Anda perlu mencegah default, berikut ini adalah pekerjaannya:

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

Kami juga dapat menggunakan DOMNodeRemoved:

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