Come posso verificare se un elemento jQuery si trova nel DOM?

Diciamo che definisco un elemento

$foo = $('#foo');

e poi chiamo

$foo.remove()

da qualche evento. La mia domanda è: come posso verificare se $ foo è stato rimosso o meno dal DOM? Ho scoperto che $foo.is(':hidden')funziona, ma che ovviamente ritornerebbe vero anche se avessi semplicemente chiamato $foo.hide().

Come questo:

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

Funzionerà comunque se uno dei genitori dell'elemento fosse rimosso (nel qual caso l'elemento stesso avrà ancora un genitore).

Che ne dici di fare questo:

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

Ho appena realizzato una risposta mentre stavo scrivendo la mia domanda: Chiama

$foo.parent()

Se $f00è stato rimosso dal DOM, quindi $foo.parent().length === 0. Altrimenti, la sua lunghezza sarà almeno 1.

[Modifica: questo non è del tutto corretto, perché un elemento rimosso può ancora avere un genitore; per esempio, se rimuovi a <ul>, ognuno dei suoi figli <li>avrà comunque un genitore. Usa invece la risposta di SLaks.

Dato che non sono in grado di rispondere come commento (immagino un karma troppo basso), ecco una risposta completa. Il modo più veloce è srotolare facilmente il controllo jQuery per il supporto del browser e ridurre al minimo i fattori costanti.

Come visto anche qui - http://jsperf.com/jquery-element-in-dom/28 - il codice sarebbe simile al seguente:

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

Questo è semanticamente equivalente a jQuery.contains (document.documentElement, elt [0]).

Probabilmente il modo più performante è:

document.contains(node); // boolean

Questo funziona anche con jQuery:

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

Fonte da MDN

Nota:

• Internet Explorer supporta solo contains()elementi.

Mi è piaciuto questo approccio. No jQuery e nessuna ricerca DOM. Per prima cosa trova il genitore principale (antenato). Quindi vedi se questo è documentElement.

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

invece di iterare i genitori, puoi semplicemente ottenere il rettangolo di limitazione che è tutto zeri quando l'elemento è staccato da dom

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

se si desidera gestire il caso limite di un elemento di larghezza e altezza zero in alto a zero e zero a sinistra, è possibile verificare due volte ripetendo i genitori fino al documento

Concordo con il commento di Perro. Può anche essere fatto in questo modo:

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

Perché non solo if( $('#foo').length === 0)...:?

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