Wie überprüfe ich, ob sich ein jQuery-Element im DOM befindet?

Angenommen, ich definiere ein Element

$foo = $('#foo');

und dann rufe ich an

$foo.remove()

von einem Ereignis. Meine Frage ist, wie überprüfe ich, ob $ foo aus dem DOM entfernt wurde oder nicht? Ich habe festgestellt, dass das $foo.is(':hidden')funktioniert, aber das würde natürlich auch wahr sein, wenn ich nur anrufe $foo.hide().

So was:

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

Dies funktioniert weiterhin, wenn eines der übergeordneten Elemente des Elements entfernt wurde (in diesem Fall hat das Element selbst weiterhin ein übergeordnetes Element).

Wie wäre es damit:

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

Ich habe gerade eine Antwort erhalten, als ich meine Frage tippte: Anruf

$foo.parent()

Wenn $f00aus dem DOM entfernt wurde, dann $foo.parent().length === 0. Andernfalls beträgt seine Länge mindestens 1.

[Bearbeiten: Dies ist nicht ganz korrekt, da ein entferntes Element noch ein übergeordnetes Element haben kann. Wenn Sie beispielsweise a entfernen <ul>, hat jedes seiner Kinder <li>weiterhin ein Elternteil. Verwenden Sie stattdessen die Antwort von SLaks.

Da ich nicht als Kommentar antworten kann (zu geringes Karma, denke ich), ist hier eine vollständige Antwort. Der schnellste Weg ist einfach, den jQuery-Check für die Browserunterstützung abzuwickeln und die konstanten Faktoren auf ein Minimum zu reduzieren.

Wie auch hier zu sehen - http://jsperf.com/jquery-element-in-dom/28 - würde der Code folgendermaßen aussehen:

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

Dies entspricht semantisch jQuery.contains (document.documentElement, elt [0]).

Der wahrscheinlich performativste Weg ist:

document.contains(node); // boolean

Dies funktioniert auch mit jQuery:

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

Quelle von MDN

Hinweis:

• Internet Explorer unterstützt nur contains()Elemente.

Dieser Ansatz hat mir gefallen. Keine jQuery und keine DOM-Suche. Finden Sie zuerst den obersten Elternteil (Vorfahren). Überprüfen Sie dann, ob dies das documentElement ist.

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

Anstatt Eltern zu iterieren, können Sie einfach das Begrenzungsrecht erhalten, das alle Nullen sind, wenn das Element von dom getrennt wird

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

Wenn Sie den Randfall eines Elements mit der Breite und Höhe Null bei Null oben und Null links behandeln möchten, können Sie dies überprüfen, indem Sie die Eltern bis zum document.body iterieren

Stimmen Sie Perros Kommentar zu. Es kann auch so gemacht werden:

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

Warum nicht einfach : if( $('#foo').length === 0)...?

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