How do I check whether a jQuery element is in the DOM?

Question

Let\'s say that I define an element

$foo = $(\'#foo\');

and then I call

$foo.remove()

from some event. My

Answer 1

Probably the most performative way is:

document.contains(node); // boolean

This also works with jQuery:

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

Source from MDN

Note:

• Internet Explorer only supports contains() for elements.

Answer 2

Agree with Perro's comment. It can also be done like this:

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

Answer 3

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

Answer 4

Why not just: if( $('#foo').length === 0)... ?

Answer 5

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

Answer 6

How about doing this:

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