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

Question

Digamos que defino un elemento

$foo = $('#foo'); 

y luego llamo

$foo.remove() 

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

Answer 1

De esta manera:

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

Esto seguirá funcionando si uno de los padres del elemento fue eliminado (en cuyo caso el elemento en sí va a tener un padre).

Answer 2

me he dado cuenta de una respuesta como yo estaba escribiendo mi pregunta: Call

$foo.parent() 

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

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

Answer 3

¿Cómo hacer esto:

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

Answer 4

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

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

Answer 5

Ya que soy incapaz de responder como un comentario (demasiado bajo Karma, supongo), he aquí una respuesta completa. La manera más rápida es desenrollar fácilmente la verificación de jQuery en busca de compatibilidad con el 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); 

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

Answer 6

¿Por qué no solo: if($('#foo').length === 0)...?

Answer 7

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

Answer 8

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

Answer 9

me gusta este enfoque. Sin jQuery y sin búsqueda DOM. Primero encuentre el padre superior (ancestro). Luego, vea si ese es el elemento del documento.

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

Answer 10

Probablemente la forma más performativo 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 only supports contains() for elements.