Comment vérifier si un élément jQuery se trouve dans le DOM?

Question

Disons que je définis un élément

 $foo = $('#foo');
 

et puis j'appelle

 $foo.remove()
 

de quelque événement. Ma question est la suivante: comment vérifier si $ foo a été supprimé du DOM ou non? J'ai trouvé que $foo.is(':hidden') fonctionne, mais cela retournerait bien sûr aussi si j'ai simplement appelé $foo.hide() .

Answer 1

Comme ça:

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

Cela fonctionnera toujours si l'un des parents de l'élément était supprimé (auquel cas l'élément lui-même aura toujours un parent).

Answer 2

Que diriez-vous de faire ceci:

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

Answer 3

Je viens de réaliser une réponse en tapant ma question: Appeler

 $foo.parent()
 

Si $f00 a été supprimé du DOM, alors $foo.parent().length === 0 . Sinon, sa longueur sera d'au moins 1.

[Edit: Ceci n'est pas tout à fait correct, car un élément supprimé peut toujours avoir un parent; Par exemple, si vous supprimez un <ul> , chacun de ses enfants <li> s aura toujours un parent. Utilisez plutôt la réponse de SLaks.

Answer 4

Depuis que je ne suis pas en mesure de répondre à un commentaire (trop faible karma, je suppose), voici une réponse complète. Le moyen le plus rapide est facile de dérouler le jQuery vérifier la prise en charge du navigateur et de se raser les facteurs constants au minimum.

Comme on le voit aussi ici - http://jsperf.com/jquery-element-in-dom/28 - le code devrait ressembler à ceci:

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

C'est sémantiquement équivalent à jQuery.contient(document.documentElement, elt[0]).

Answer 5

D'accord avec le commentaire de Perro. Cela peut aussi être fait comme ceci:

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