Bagaimana cara memeriksa apakah elemen jQuery ada di DOM?

Katakanlah saya mendefinisikan elemen

$foo = $('#foo');

dan kemudian saya menelepon

$foo.remove()

dari beberapa acara. Pertanyaan saya adalah, bagaimana saya memeriksa apakah $ foo telah dihapus dari DOM atau tidak? Saya telah menemukan itu $foo.is(':hidden')berhasil, tetapi tentu saja itu juga akan mengembalikan kebenaran jika saya hanya menelepon $foo.hide().

Seperti ini:

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

Ini masih akan berfungsi jika salah satu dari orang tua elemen telah dihapus (dalam hal ini elemen itu sendiri akan tetap memiliki orang tua).

Bagaimana dengan melakukan ini:

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

Saya baru menyadari jawaban ketika saya mengetik pertanyaan saya: Telepon

$foo.parent()

Jika $f00telah dihapus dari DOM, maka $foo.parent().length === 0. Kalau tidak, panjangnya paling tidak 1.

[Sunting: Ini tidak sepenuhnya benar, karena elemen yang dihapus masih dapat memiliki induk; misalnya, jika Anda menghapus a <ul>, masing-masing anaknya <li>masih akan memiliki orangtua. Gunakan jawaban SLaks sebagai gantinya.

Karena saya tidak dapat menjawab sebagai komentar (saya kira terlalu rendah karma), inilah jawaban lengkapnya. Cara tercepat adalah dengan mudah membuka gulungan jQuery untuk dukungan browser dan mencukur faktor konstan menjadi minimum.

Seperti terlihat juga di sini - http://jsperf.com/jquery-element-in-dom/28 - kode akan terlihat seperti ini:

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

Ini semantik setara dengan jQuery.contains (document.documentElement, elt [0]).

Mungkin cara yang paling performatif adalah:

document.contains(node); // boolean

Ini juga berfungsi dengan jQuery:

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

Sumber dari MDN

catatan:

• Internet Explorer hanya mendukung contains()elemen.

Saya menyukai pendekatan ini. Tidak ada jQuery dan tidak ada pencarian DOM. Pertama temukan orang tua teratas (leluhur). Kemudian lihat apakah itu documentElement.

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

alih-alih iterasi orang tua Anda hanya bisa mendapatkan kotak pembatas yang semuanya nol ketika elemen dilepaskan dari dom

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

jika Anda ingin menangani kasing tepi elemen lebar dan tinggi nol di atas nol dan di kiri nol, Anda dapat memeriksa ulang dengan mengulangi orang tua hingga dokumen.

Setuju dengan komentar Perro. Bisa juga dilakukan seperti ini:

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

Kenapa tidak adil if( $('#foo').length === 0)...:?

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