jQuery 요소가 DOM에 있는지 어떻게 확인합니까?

요소를 정의한다고 가정 해 봅시다.

$foo = $('#foo');

그런 다음 전화

$foo.remove()

어떤 이벤트에서. 내 질문은 $ foo가 DOM에서 제거되었는지 여부를 어떻게 확인합니까? 나는 그것이 $foo.is(':hidden')효과 가 있음을 발견 했지만, 내가 단순히 전화하면 사실을 반환합니다 $foo.hide().

이처럼 :

if (!jQuery.contains(document, $foo[0])) {
    //Element is detached
}

요소의 부모 중 하나가 제거 된 경우에도 여전히 작동합니다 (이 경우 요소 자체에는 여전히 부모가 있음).

이 작업은 어떻습니까 :

$element.parents('html').length > 0

방금 질문을 입력하면서 답변을 깨달았습니다.

$foo.parent()

$f00DOM에서 제거 된 경우 $foo.parent().length === 0. 그렇지 않으면 길이는 1 이상입니다.

[편집 : 제거 된 요소가 여전히 부모를 가질 수 있기 때문에 이것은 완전히 정확하지 않습니다. 예를 들어,를 제거해도 <ul>각 하위 <li>에는 여전히 부모가 있습니다. 대신 SLaks의 답변을 사용하십시오.

코멘트로 응답 할 수 없기 때문에 (너무 낮은 업장이라고 생각합니다) 여기 전체 답변이 있습니다. 가장 빠른 방법은 브라우저 지원을 위해 jQuery 검사를 쉽게 풀고 상수 요소를 최소로 줄이는 것입니다.

http://jsperf.com/jquery-element-in-dom/28- 여기에서도 볼 수 있듯이 코드는 다음과 같습니다.

var isElementInDOM = (function($) {
  var docElt = document.documentElement, find,
      contains = docElt.contains ?
        function(elt) { return docElt.contains(elt); } :

        docElt.compareDocumentPosition ?
          function(elt) {
            return docElt.compareDocumentPosition(elt) & 16;
          } :
          ((find = function(elt) {
              return elt && (elt == docElt || find(elt.parentNode));
           }), function(elt) { return find(elt); });

  return function(elt) {
    return !!(elt && ((elt = elt.parent) == docElt || contains(elt)));
  };
})(jQuery);

이것은 의미 적으로 jQuery.contains (document.documentElement, elt [0])와 동일합니다.

아마도 가장 성능이 좋은 방법은 다음과 같습니다.

document.contains(node); // boolean

이것은 jQuery 와도 작동합니다.

document.contains($element[0]); // var $element = $("#some-element")
document.contains(this[0]); // in contexts like $.each(), `this` is the jQ object

MDN 소스

노트 :

• Internet Explorer는 contains()요소 만 지원 합니다.

나는이 접근법을 좋아했다. jQuery와 DOM 검색이 없습니다. 먼저 상위 부모 (조상)를 찾으십시오. 그런 다음 documentElement인지 확인하십시오.

function ancestor(HTMLobj){
  while(HTMLobj.parentElement){HTMLobj=HTMLobj.parentElement}
  return HTMLobj;
}
function inTheDOM(obj){
  return ancestor(obj)===document.documentElement;
}

부모를 반복하는 대신 요소가 dom에서 분리 될 때 경계 0을 얻을 수 있습니다.

function isInDOM(element) {
    var rect=element.getBoundingClientRect();
    return (rect.top || rect.bottom || rect.height || rect.width)?true:false;
}

너비가 0 인 요소와 너비가 0 인 요소의 가장자리를 0에서 왼쪽으로 처리하려면 부모가 문서까지 반복하여 두 번 확인할 수 있습니다.

Perro의 의견에 동의하십시오. 다음과 같이 수행 할 수도 있습니다.

$foo.parents().last().is(document.documentElement);

jQuery.fn.isInDOM = function () {
   if (this.length == 1) {
      var element = this.get(0);
      var rect = element.getBoundingClientRect();
      if (rect.top + rect.bottom + rect.width + rect.height + rect.left + rect.right == 0)
         return false;
      return true;
   }
   return false;
};

왜 안돼 if( $('#foo').length === 0)...?

if($foo.nodeType ){ element is node type}