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

Disons que je définis un élément

$foo = $('#foo');

et puis j'appelle

$foo.remove()

d'un événement. Ma question est la suivante: comment vérifier si $ foo a été supprimé du DOM ou non? J'ai trouvé que cela $foo.is(':hidden')fonctionne, mais cela reviendrait bien sûr aussi vrai si je appelais simplement $foo.hide().

Comme ça:

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

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

Que diriez-vous de faire ceci:

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

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

$foo.parent()

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

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

Comme je suis incapable de répondre en tant que commentaire (karma trop faible je suppose), voici une réponse complète. Le moyen le plus rapide est de dérouler facilement la vérification jQuery de la prise en charge du navigateur et de réduire au minimum les facteurs constants.

Comme vu aussi ici - http://jsperf.com/jquery-element-in-dom/28 - le code ressemblerait à 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);

Ceci est sémantiquement équivalent à jQuery.contains (document.documentElement, elt [0]).

La méthode la plus performante est probablement:

document.contains(node); // boolean

Cela fonctionne également avec jQuery:

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

Source de MDN

Remarque:

• Internet Explorer ne prend en charge contains()que les éléments.

J'ai aimé cette approche. Pas de jQuery et pas de recherche DOM. Trouvez d'abord le parent supérieur (ancêtre). Ensuite, voyez si c'est le documentElement.

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

au lieu d'itérer les parents, vous pouvez simplement obtenir le rectangle de délimitation qui est entièrement à zéro lorsque l'élément est détaché de dom

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

si vous souhaitez gérer la casse du bord d'un élément de largeur et de hauteur nulles à zéro en haut et à zéro à gauche, vous pouvez vérifier deux fois en itérant les parents jusqu'au document.

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

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

Pourquoi pas simplement if( $('#foo').length === 0)...:?

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