Como verifico se um elemento jQuery está no DOM?

Digamos que eu defino um elemento

$foo = $('#foo');

e então eu ligo

$foo.remove()

de algum evento. Minha pergunta é: como verifico se $ foo foi removido do DOM ou não? Descobri que $foo.is(':hidden')funciona, mas é claro que isso também retornaria verdadeiro se eu apenas ligasse $foo.hide().

Como isso:

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

Isso ainda funcionará se um dos pais do elemento for removido (nesse caso, o próprio elemento ainda terá um pai).

Que tal fazer isso:

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

Acabei de perceber uma resposta enquanto digitava minha pergunta: Ligar

$foo.parent()

Se $f00foi removido do DOM, então$foo.parent().length === 0 . Caso contrário, seu comprimento será pelo menos 1.

[Edit: Isso não está totalmente correto, porque um elemento removido ainda pode ter um pai; por exemplo, se você remover a <ul>, cada um de seus filhos <li>ainda terá um pai. Use a resposta do SLaks.

Como não consigo responder como comentário (carma muito baixo, acho), aqui está uma resposta completa. A maneira mais rápida é facilmente desenrolar a verificação do jQuery para obter suporte ao navegador e reduzir os fatores constantes ao mínimo.

Como também é visto aqui - http://jsperf.com/jquery-element-in-dom/28 - o código ficaria assim:

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

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

Provavelmente a maneira mais performativa é:

document.contains(node); // boolean

Isso também funciona com o jQuery:

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

Origem da MDN

Nota:

• O Internet Explorer suporta apenas contains()elementos.

Eu gostei dessa abordagem. Sem jQuery e nenhuma pesquisa DOM. Primeiro encontre o pai principal (ancestral). Então veja se esse é o documentElement.

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

em vez de iterar os pais, você pode obter o retângulo delimitador, que é todo zeros quando o elemento é desanexado de dom

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

se você quiser lidar com a caixa de borda de um elemento de largura e altura zero na parte superior e esquerda zero, verifique novamente iterando os pais até o documento.body

Concorde com o comentário de Perro. Também pode ser feito assim:

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

Por que não apenas if( $('#foo').length === 0)...:?

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