jQuery를 - 요소가 DOM에서 제거 트리거 이벤트

해결법

1.그냥 확인, 그것은 이미 내장되어 JQuery와 현재 버전 :

그냥 확인, 그것은 이미 내장되어 JQuery와 현재 버전 :

jQuery를 - v1.9.1

jQuery를 UI - v1.10.2
```
$("#myDiv").on("remove", function () {
    alert("Element was removed");
})
```
중요 :이 두 스크립트를로드 할 수 있도록 (JQuery와 및 JQuery와 - UI)가 그 작업을하기 위해, JQuery와 UI 스크립트 (하지 JQuery와)의 기능입니다. 다음은 예입니다 http://jsfiddle.net/72RTz/
2.당신은 이것에 대한 jQuery를 특별한 이벤트를 사용할 수 있습니다.

당신은 이것에 대한 jQuery를 특별한 이벤트를 사용할 수 있습니다.

모든 단순에서,

설정:
```
(function($){
  $.event.special.destroyed = {
    remove: function(o) {
      if (o.handler) {
        o.handler()
      }
    }
  }
})(jQuery)
```
용법:
```
$('.thing').bind('destroyed', function() {
  // do stuff
})
```
부록은 피에르 DesignerGuy의 의견에 대답 :

. $를 호출 할 때하지하려면 콜백 불이 ( '. 일') 오프 ( '파괴')에 경우 조건을 변경하는 경우 (! o.handler && o.type == '파괴') {...}
3.당신은 DOMNodeRemoved 이벤트 (DOM 레벨 3 WC3 사양의 일부)에 바인딩 할 수 있습니다.

당신은 DOMNodeRemoved 이벤트 (DOM 레벨 3 WC3 사양의 일부)에 바인딩 할 수 있습니다.

IE9에서 작동, 파이어 폭스와 크롬의 최신 버전.

예:
```
$(document).bind("DOMNodeRemoved", function(e)
{
    alert("Removed: " + e.target.nodeName);
});
```
요소 DOMNodeInserted 결합함으로써 삽입하는 경우에도 통지를 얻을 수 있습니다
4.아무 요소를 제거하기위한 이벤트 내장되지 않은,하지만 당신은 가짜 연장 jQuery의 기본 제거 방법으로 만들 수 있습니다. 콜백 실제로 참조를 유지하기 위해 그것을 제거하기 전에 호출해야합니다.

아무 요소를 제거하기위한 이벤트 내장되지 않은,하지만 당신은 가짜 연장 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();
```
참고 :이 답변에 몇 가지 문제가 다른 포스터에 의해 설명되고있다.

이 문제에 대한 가장 우아한 해결책은 될 것으로 보인다 : https://stackoverflow.com/a/10172676/216941
5.페이지에서 요소를 제거하는 여러 가지 방법 (예를 들어) .html 중에서 (), .replace를 (사용하여이 등)이 있기 때문에 () .remove를 후킹하여이 문제를 처리하는 가장 좋은 방법이 아닙니다.

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

다양한 메모리 누출 위험을 방지하기 위해, 내부에 관계없이 jQuery를 제거하는 데에있어서의 각 요소 제거 jQuery.cleanData 함수 ()를 호출 할 것이다.

자세한 내용은이 답변을 참조 : 자바 스크립트 메모리 누수를

그래서, 최상의 결과를 위해, 당신은 jquery.event.destroyed 플러그인이 바로 이러한 작업을 수행하는 것 인의 cleanData 기능을 훅한다 :

http://v3.javascriptmvc.com/jquery/dist/jquery.event.destroyed.js
6.jQuery를 UI를 사용하는 사람들을 위해 :

jQuery를 UI를 사용하는 사람들을 위해 :

jQuery를 UI는 사용자가 명시 적으로 지정된 요소를 제거 할 때 요소 (있는 자동 세척의 jQuery 방법으로 DOM에서 제거됩니다 경우뿐만 아니라, 예를 들어 대체 처리 가져옵니다 제거 이벤트를 구현하는 jQuery를 방법의 일부를 무시했다, HTML, 기타.). 이것은 기본적으로 당신이 JQuery와 DOM 요소와 관련된 이벤트 및 데이터를 "정리"때 해고 같은 이벤트에 후크를 넣을 수 있습니다.

존 레식은 그가 jQuery를 코어의 향후 버전에서이 이벤트를 구현하는 아이디어에 열려 있음을 지적하고있다, 그러나 현재 서 어디 모르겠어요.

7.(I JQuery와 UI 프레임 워크에서 이러한 확장을 추출한)

(I JQuery와 UI 프레임 워크에서 이러한 확장을 추출한)

() (빈) 및 HTML () 및 제거와 함께 작동

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

8.나는 (업데이트에도 불구하고 여기 참조) 바인딩 해제와 함께 작업이 답을 얻을 수 있지만, 주위에 방법을 알아낼 수 있었다 없습니다. 대답은 '파괴'이벤트를 트리거 된 'destroy_proxy'특별 이벤트를 만드는 것이 었습니다. 당신은 모두 'destroyed_proxy'에 이벤트 리스너를 넣어 '파괴', 당신은 바인딩 해제, 당신은 단지 때어 '파괴'이벤트를 할 때 :

나는 (업데이트에도 불구하고 여기 참조) 바인딩 해제와 함께 작업이 답을 얻을 수 있지만, 주위에 방법을 알아낼 수 있었다 없습니다. 대답은 '파괴'이벤트를 트리거 된 'destroy_proxy'특별 이벤트를 만드는 것이 었습니다. 당신은 모두 'destroyed_proxy'에 이벤트 리스너를 넣어 '파괴', 당신은 바인딩 해제, 당신은 단지 때어 '파괴'이벤트를 할 때 :
```
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++;
});
```
여기에 바이올린입니다
9.I mtkopone의 jQuery를 특별한 이벤트를 사용하여 대답하지만, 요소 대신 제거 또는 b의 분리되는 그것이 작동하지 않습니다)) 오래된 비 JQuery와 라이브러리가 당신의 요소를 파괴하는 innerHTML을을 사용하여 같은

I mtkopone의 jQuery를 특별한 이벤트를 사용하여 대답하지만, 요소 대신 제거 또는 b의 분리되는 그것이 작동하지 않습니다)) 오래된 비 JQuery와 라이브러리가 당신의 요소를 파괴하는 innerHTML을을 사용하여 같은
10.상당히 불쾌한 될 수있다 - 당신은 DOM의 사본을 보관해야하고 폴링 루프의 어떤 종류의 기존 DOM에 비교 것, 그래서 나는 확실히,이에 대한 이벤트 핸들이 아니에요. 당신이 HTML을 검사하고 일부 DOM-변경을 실행하면, 그것은 짧은 시간 동안 불을 지르고 콘솔에서 노란색의 변화를 강조 -하지만 방화범이 작업을 수행합니다.

상당히 불쾌한 될 수있다 - 당신은 DOM의 사본을 보관해야하고 폴링 루프의 어떤 종류의 기존 DOM에 비교 것, 그래서 나는 확실히,이에 대한 이벤트 핸들이 아니에요. 당신이 HTML을 검사하고 일부 DOM-변경을 실행하면, 그것은 짧은 시간 동안 불을 지르고 콘솔에서 노란색의 변화를 강조 -하지만 방화범이 작업을 수행합니다.

또는, 삭제 기능을 만들 수 있습니다 ...
```
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");
```

11.이것은 jQuery를 라이브 제거 수신기를 만드는 방법입니다 :

이것은 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)
  }
});

12.jQuery를에서 "제거"이벤트는 첨가하지 않고, 잘 작동합니다. 대신 jQuery를 패치의 간단한 트릭을 사용하는 시간에 더 신뢰할 수 있습니다.

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 요소가 제거된다.
13.@ 데이비드 대답에 참조 :

@ 데이비드 대답에 참조 :

당신은 예를 들어 다른 기능과 한혜진 수행 할 때. HTML () 내 경우처럼, 새로운 기능의 수익을 추가하는 것을 잊지 마세요 :
```
(function() {
    var ev = new $.Event('html'),
        orig = $.fn.html;
    $.fn.html = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();
```

14.이.

이.

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

15.당신이로 preventDefault해야 할 경우에 아담의 대답에 확장, 여기 주위에 작업입니다 :

당신이로 preventDefault해야 할 경우에 아담의 대답에 확장, 여기 주위에 작업입니다 :

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

16.우리는 또한 DOMNodeRemoved을 사용할 수 있습니다 :

우리는 또한 DOMNodeRemoved을 사용할 수 있습니다 :
```
$("#youridwhichremoved").on("DOMNodeRemoved", function () {
// do stuff
})
```

from https://stackoverflow.com/questions/2200494/jquery-trigger-event-when-an-element-is-removed-from-the-dom by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 jQuery를 또는 자바 스크립트와 이중으로 통화 문자열을 변환하는? (0)	2020.10.07
[JQUERY] 어떻게 .reset와 jQuery를 사용하여 양식을 재설정하는 () 메소드 (0)	2020.10.07
[JQUERY] 요소 내에서 마우스 위치를 얻을 수 JQuery와 (0)	2020.10.07
[JQUERY] JSON에 직렬화 폼 데이터 [중복] (0)	2020.10.07
[JQUERY] 자바 스크립트 비동기 반환 값 / jQuery로 지정 [중복] (0)	2020.10.07

복붙노트

[JQUERY] jQuery를 - 요소가 DOM에서 제거 트리거 이벤트

jQuery를 - 요소가 DOM에서 제거 트리거 이벤트

해결법

1.그냥 확인, 그것은 이미 내장되어 JQuery와 현재 버전 :

2.당신은 이것에 대한 jQuery를 특별한 이벤트를 사용할 수 있습니다.

3.당신은 DOMNodeRemoved 이벤트 (DOM 레벨 3 WC3 사양의 일부)에 바인딩 할 수 있습니다.

4.아무 요소를 제거하기위한 이벤트 내장되지 않은,하지만 당신은 가짜 연장 jQuery의 기본 제거 방법으로 만들 수 있습니다. 콜백 실제로 참조를 유지하기 위해 그것을 제거하기 전에 호출해야합니다.

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

6.jQuery를 UI를 사용하는 사람들을 위해 :

7.(I JQuery와 UI 프레임 워크에서 이러한 확장을 추출한)

9.I mtkopone의 jQuery를 특별한 이벤트를 사용하여 대답하지만, 요소 대신 제거 또는 b의 분리되는 그것이 작동하지 않습니다)) 오래된 비 JQuery와 라이브러리가 당신의 요소를 파괴하는 innerHTML을을 사용하여 같은

11.이것은 jQuery를 라이브 제거 수신기를 만드는 방법입니다 :

12.jQuery를에서 "제거"이벤트는 첨가하지 않고, 잘 작동합니다. 대신 jQuery를 패치의 간단한 트릭을 사용하는 시간에 더 신뢰할 수 있습니다.

13.@ 데이비드 대답에 참조 :

14.이.

15.당신이로 preventDefault해야 할 경우에 아담의 대답에 확장, 여기 주위에 작업입니다 :

16.우리는 또한 DOMNodeRemoved을 사용할 수 있습니다 :

'JQUERY' 카테고리의 다른 글

티스토리툴바