Jak sprawdzić, czy element jQuery znajduje się w DOM?

Powiedzmy, że definiuję element

$foo = $('#foo');

a potem dzwonię

$foo.remove()

z jakiegoś wydarzenia. Moje pytanie brzmi, jak sprawdzić, czy $ foo zostało usunięte z DOM, czy nie? Przekonałem się, że to $foo.is(':hidden')działa, ale to oczywiście zwróci prawdę, gdybym tylko zadzwonił $foo.hide().

Lubię to:

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

Będzie to nadal działać, jeśli jeden z elementów nadrzędnych elementu został usunięty (w takim przypadku sam element nadal będzie miał element nadrzędny).

Co powiesz na to:

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

Właśnie zrozumiałem odpowiedź, kiedy pisałem swoje pytanie: Zadzwoń

$foo.parent()

Jeśli $f00został usunięty z DOM, to $foo.parent().length === 0. W przeciwnym razie jego długość będzie wynosić co najmniej 1.

[Edycja: Nie jest to całkowicie poprawne, ponieważ usunięty element może nadal mieć rodzica; na przykład, jeśli usuniesz a <ul>, każde z jego dzieci <li>nadal będzie miało rodzica. Zamiast tego użyj odpowiedzi SLaków.

Ponieważ nie mogę odpowiedzieć jako komentarz (wydaje mi się, że jest to zbyt niska karma), oto pełna odpowiedź. Najszybszym sposobem jest łatwe rozwinięcie sprawdzania jQuery pod kątem obsługi przeglądarki i ograniczenie stałych współczynników do minimum.

Jak widać również tutaj - http://jsperf.com/jquery-element-in-dom/28 - kod wyglądałby tak:

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

Jest to semantyczne odpowiednik jQuery.contains (document.documentElement, elt [0]).

Prawdopodobnie najbardziej performatywny sposób to:

document.contains(node); // boolean

Działa to również z jQuery:

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

Źródło z MDN

Uwaga:

• Internet Explorer obsługuje tylko contains()elementy.

Podobało mi się to podejście. Bez jQuery i bez wyszukiwania DOM. Najpierw znajdź najwyższego rodzica (przodka). Następnie sprawdź, czy to jest documentElement.

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

zamiast iterować rodziców, możesz po prostu uzyskać prostokąt ograniczający, który składa się z samych zer, gdy element jest odłączany od domeny

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

jeśli chcesz obsłużyć skrajny przypadek elementu o zerowej szerokości i wysokości na zero na górze i zero po lewej stronie, możesz dwukrotnie sprawdzić, iterując rodziców aż do dokumentu. body

Zgadzam się z komentarzem Perro. Można to również zrobić w ten sposób:

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

Dlaczego nie tylko if( $('#foo').length === 0)...:?

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