¿Cómo verifico si un elemento jQuery está en el DOM?

Digamos que defino un elemento

$foo = $('#foo');

y luego llamo

$foo.remove()

de algún evento Mi pregunta es, ¿cómo verifico si $ foo se ha eliminado del DOM o no? Descubrí que $foo.is(':hidden')funciona, pero eso también sería cierto si simplemente llamara $foo.hide().

Me gusta esto:

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

Esto seguirá funcionando si se eliminó uno de los elementos primarios del elemento (en cuyo caso, el elemento mismo seguirá teniendo un elemento primario).

¿Qué tal hacer esto?

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

Acabo de darme una respuesta mientras escribía mi pregunta: Llamar

$foo.parent()

Si $f00se ha eliminado del DOM, entonces $foo.parent().length === 0. De lo contrario, su longitud será al menos 1.

[Editar: Esto no es del todo correcto, porque un elemento eliminado aún puede tener un padre; por ejemplo, si elimina un <ul>, cada uno de sus hijos <li>seguirá teniendo un padre. Utilice la respuesta de SLaks en su lugar.

Como no puedo responder como un comentario (supongo que el karma es demasiado bajo), aquí hay una respuesta completa. La forma más rápida es desenrollar fácilmente la comprobación de jQuery para el soporte del navegador y reducir al mínimo los factores constantes.

Como se ve también aquí: http://jsperf.com/jquery-element-in-dom/28 , el código se vería así:

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

Esto es semánticamente equivalente a jQuery.contains (document.documentElement, elt [0]).

Probablemente la forma más performativa es:

document.contains(node); // boolean

Esto también funciona con jQuery:

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

Fuente de MDN

Nota:

• Internet Explorer solo admite contains()elementos.

Me gustó este enfoque. Sin jQuery y sin búsqueda DOM. Primero encuentre el padre principal (ancestro). Luego vea si ese es el documentElement.

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

en lugar de iterar padres, puede obtener el rect de límite que es todo ceros cuando el elemento se separa de dom

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

si desea manejar el caso de borde de un elemento de ancho y altura cero en la parte superior cero y cero izquierda, puede verificar dos veces iterando los padres hasta el documento.

De acuerdo con el comentario de Perro. También se puede hacer así:

$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 qué no solo if( $('#foo').length === 0)...:?

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