요소가 페이지에서 제거 될 때 일부 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 UI-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
})

Pierre와 DesignerGuy의 의견에 대한 부록 :

를 호출 할 때 콜백이 발생하지 않도록하려면 $('.thing').off('destroyed')if 조건을 다음과 같이 변경하십시오.if (o.handler && o.type !== 'destroyed') { ... }

DOMNodeRemoved 이벤트 (DOM 레벨 3 WC3 스펙의 일부)에 바인딩 할 수 있습니다.

Firefox 및 Chrome의 최신 릴리스 인 IE9에서 작동합니다.

예:

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

바인딩 할 때 요소를 삽입 할 때 알림을받을 수도 있습니다. DOMNodeInserted

요소를 제거하는 기본 제공 이벤트는 없지만 가짜 확장 jQuery의 기본 remove 메소드를 사용하여 작성할 수 있습니다. 참조를 유지하려면 실제로 제거하기 전에 콜백을 호출해야합니다.

(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도 remove를 재정의합니다.

이 문제에 대한 가장 우아한 해결책은 다음과 같습니다. https://stackoverflow.com/a/10172676/216941

후킹 .remove()페이지에서 요소를 제거하는 방법에는 여러 가지가 (예를 들어, 사용하여 있기 때문에이 문제를 처리하는 가장 좋은 방법이 아니다 .html(), .replace()등).

내부적으로 다양한 메모리 누수 위험을 방지하기 위해 내부적으로 jQuery는 jQuery.cleanData()제거하는 데 사용 된 메소드에 관계없이 제거 된 각 요소에 대해 함수를 호출하려고 시도 합니다.

자세한 내용은이 답변을 참조하십시오 : javascript memory leaks

따라서 최상의 결과를 얻으 cleanData려면 jquery.event.destroyed 플러그인이 수행 하는 기능과 정확히 일치 하는 함수를 연결해야합니다 .

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

jQuery UI를 사용하는 사람들 :

jQuery를 UI가 구현하는 jQuery를 방법의 일부를 무시하고있다 remove명시 적으로 지정된 요소를 제거 할뿐만 아니라, 경우 요소가있는 자동 세척의 jQuery 방법으로 DOM에서 (예를 들어, 제거 도착하지 않을 경우에만 처리됩니다 이벤트 replace, html등) . 이것은 기본적으로 jQuery가 DOM 요소와 관련된 이벤트와 데이터를 "정리"할 때 발생하는 동일한 이벤트에 후크를 넣을 수있게합니다.

John Resig는 향후 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'특수 이벤트를 작성하는 것이 었습니다. 이벤트 리스너를 'destroyed_proxy'와 'destroyed'모두에 배치 한 후 바인드를 해제하려면 '파기 된'이벤트를 바인드 해제하십시오.

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

여기는 바이올린입니다

jQuery 특수 이벤트를 사용하는 mtkopone의 답변이 마음에 들지만 a) 요소가 제거되지 않고 분리 될 때 또는 b) 오래된 비 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 라이브 제거 리스너 를 만드는 방법입니다 .

$(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의 "remove"이벤트는 추가하지 않고도 정상적으로 작동합니다. jQuery를 패치하는 대신 간단한 트릭을 사용하는 것이 더 안정적 일 수 있습니다.

DOM에서 제거하려는 요소의 속성을 수정하거나 추가하기 만하면됩니다. 따라서 "do_not_count_it"속성을 사용하여 소멸 될 요소 만 무시하는 모든 업데이트 기능을 트리거 할 수 있습니다.

가격에 해당하는 셀이있는 테이블이 있고 마지막 가격 만 표시해야한다고 가정하십시오. 이것은 가격 셀이 삭제 될 때 트리거 할 선택기입니다 (테이블의 각 행에 버튼이 있으며 표시되지 않음) 여기)

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

그리고 다음은 제거 된 가격 인 경우 마지막 가격을 고려하지 않고 테이블에서 마지막 가격을 찾는 기능입니다. 실제로 "remove"이벤트가 트리거되고이 함수가 호출 될 때 요소는 아직 제거되지 않습니다.

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

결국 update_prices () 함수가 정상적으로 작동하고 그 후에 DOM 요소가 제거됩니다.

@David 답변 참조 :

예를 들어 다른 기능으로 진정하고 싶을 때. 내 경우와 같이 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);
                })
         })

불이행을 예방해야 할 경우를 대비 한 Adam의 답변 확장 은 다음과 같습니다.

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