Как проверить, есть ли элемент JQuery в DOM?

Допустим, я определяю элемент

$foo = $('#foo');

а потом я звоню

$foo.remove()

с какого-то события. У меня вопрос, как я могу проверить, был ли $ foo удален из DOM или нет? Я обнаружил, что это $foo.is(':hidden')работает, но это, конечно, также вернет истину, если я просто позвоню $foo.hide().

Как это:

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

Это все равно будет работать, если один из родителей элемента был удален (в этом случае у самого элемента все еще будет родитель).

Как насчет этого:

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

Я только что понял ответ, когда набирал вопрос: Позвони

$foo.parent()

Если $f00был удален из DOM, то $foo.parent().length === 0. В противном случае его длина будет не менее 1.

[Редактировать: это не совсем правильно, потому что удаленный элемент все еще может иметь родителя; например, если вы удалите a <ul>, у каждого из его дочерних элементов <li>все равно будет родитель. Вместо этого используйте ответ SLaks.

Поскольку я не могу ответить как комментарий (я думаю, слишком низкая карма), вот полный ответ. Самый быстрый способ - это просто развернуть проверку jQuery для поддержки браузера и сократить постоянные факторы до минимума.

Как видно также здесь - http://jsperf.com/jquery-element-in-dom/28 - код будет выглядеть так:

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

Это семантически эквивалентно jQuery.contains (document.documentElement, elt [0]).

Вероятно, наиболее эффективный способ:

document.contains(node); // boolean

Это также работает с jQuery:

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

Источник из МДН

Примечание:

• Internet Explorer поддерживает только contains()элементы.

Мне понравился этот подход. Нет JQuery и DOM поиска. Сначала найдите верхнего родителя (предка). Затем посмотрите, является ли это documentElement.

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

вместо того, чтобы перебирать родителей, вы можете просто получить ограничивающий прямоугольник, который равен нулю, когда элемент отсоединен от dom

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

если вы хотите обработать крайний край нулевого элемента ширины и высоты с нуля сверху и с нуля слева, вы можете дважды проверить, перебирая родителей до document.body

Согласитесь с комментарием Перро. Это также можно сделать так:

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

Почему не просто if( $('#foo').length === 0)...:?

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