Я пытаюсь выяснить, как выполнить код JS, когда элемент удаляется со страницы:

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

есть ли для этого событие, что-то вроде:

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

Спасибо.

Только что проверил, он уже встроен в текущую версию JQuery:

JQuery - v1.9.1

Пользовательский интерфейс jQuery - v1.10.2

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

Важное замечание : Это функциональность сценария Jquery UI (не JQuery), поэтому для его работы необходимо загрузить оба сценария (jquery и jquery-ui). Вот пример: http://jsfiddle.net/72RTz/

Вы можете использовать специальные события jQuery .

Во всей простоте,

Настроить:

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

Использование:

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

Приложение к комментариям Пьера и DesignerGuy:

Чтобы не вызывать обратный вызов при вызове $('.thing').off('destroyed'), измените условие if на:if (o.handler && o.type !== 'destroyed') { ... }

Вы можете привязаться к событию DOMNodeRemoved (часть спецификации DOM уровня 3 WC3).

Работает в IE9, последних версиях Firefox и Chrome.

Пример:

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

Вы также можете получать уведомления при вставке элементов, связываясь с DOMNodeInserted

Нет встроенного события для удаления элементов, но вы можете создать его, используя метод удаления по умолчанию, выдвинутый поддельным расширением jQuery. Обратите внимание, что обратный вызов должен быть вызван до фактического удаления, чтобы сохранить ссылку.

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

Примечание: некоторые проблемы с этим ответом были изложены другими авторами.

1. Это не будет работать, когда узел удаляется с помощью html() replace()или других методов jQuery
2. Это событие вспыхивает
3. JQuery UI перезаписывает также удалить

Наиболее элегантное решение этой проблемы выглядит следующим образом: https://stackoverflow.com/a/10172676/216941.

Подключаем .remove()не самый лучший способ справиться с этим , поскольку есть много способов удаления элементов со страницы (например , с помощью .html(),.replace() и т.д.).

Чтобы предотвратить различные угрозы утечки памяти, внутренне jQuery попытается вызвать функцию jQuery.cleanData() для каждого удаленного элемента независимо от метода, используемого для его удаления.

Смотрите этот ответ для более подробной информации: утечки памяти javascript

Таким образом, для достижения наилучших результатов, вы должны подключить cleanDataфункцию, которая является именно тем, что jquery.event.destroyed плагин :

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

Для тех, кто использует JQuery UI:

Пользовательский интерфейс jQuery переопределил некоторые методы jQuery для реализации removeсобытия, которое обрабатывается не только при явном удалении данного элемента, но также и при удалении элемента из DOM с помощью любых самоочищающихся методов jQuery (например replace, htmlи т. д.) , Это в основном позволяет вам подключить те же события, которые запускаются, когда jQuery «очищает» события и данные, связанные с элементом DOM.

Джон Резиг указал, что он открыт для идеи реализации этого события в будущей версии ядра jQuery, но я не уверен, где оно сейчас стоит.

Требуется только jQuery (не требуется jQuery UI)

( Я извлек это расширение из инфраструктуры jQuery UI )

Работает с: empty()и html()и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 );

С этим решением вы также можете отменить привязку обработчика событий.

$("YourElemSelector").off("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);


$("#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>

Дополнительная демоверсия - jsBin

Я не мог заставить этот ответ работать с отменой привязки (несмотря на обновление, см. Здесь ), но смог найти способ обойти это. Ответ состоял в том, чтобы создать специальное событие destroy_proxy, которое вызвало бы уничтоженное событие. Вы помещаете прослушиватель событий в «destroy_proxy» и «destroy», а затем, когда вы хотите отменить привязку, вы просто отсоединяете «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++;
});

Вот скрипка

Мне нравится ответ mtkopone, использующий специальные события jQuery, но учтите, что он не работает а) когда элементы отсоединяются вместо удаления, или б) когда некоторые старые не-jquery библиотеки используют innerHTML для уничтожения ваших элементов

Я не уверен, что для этого есть дескриптор события, поэтому вам нужно будет сохранить копию DOM и сравнить с существующей DOM в каком-то цикле опроса - что может быть довольно неприятно. Firebug делает это, хотя - если вы проверяете HTML и запускаете некоторые DOM-изменения, он выделяет изменения желтым цветом в консоли Firebug на короткое время.

Кроме того, вы можете создать функцию удаления ...

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

Вот как создать слушатель jQuery live remove :

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

Или:

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

Событие "удалить" из jQuery работает нормально, без добавления. Возможно, будет более надежным вовремя использовать простой трюк вместо исправления jQuery.

Просто измените или добавьте атрибут в элемент, который вы собираетесь удалить из DOM. Таким образом, вы можете вызвать любую функцию обновления, которая будет просто игнорировать элементы на пути к уничтожению, с атрибутом "do_not_count_it".

Предположим, у нас есть таблица с ячейками, соответствующими ценам, и вам нужно показать только последнюю цену: это селектор, который срабатывает при удалении ценовой ячейки (у нас есть кнопка в каждой строке таблицы, которая делает это, не показано) Вот)

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

А вот функция, которая находит последнюю цену в таблице, не учитывая последнюю, если она была удалена. Действительно, когда срабатывает событие «удалить» и когда вызывается эта функция, элемент еще не удален.

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

В конце концов, функция update_prices () работает нормально, и после этого элемент DOM удаляется.

ссылаясь на ответ @David:

Когда вы хотите сделать soo с другой функцией, например. html () как в моем случае, не забудьте добавить return в новую функцию:

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

Это.

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

Расширение ответа Адама, в котором вам нужно заранее указать дефолт, вот обходной путь:

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

Мы также можем использовать DOMNodeRemoved:

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