How to check an element retrieved from DOM is still present in DOM

Question

Let's say I got a DOM element, as a param of an event, for example click.

$(document).click(function() {
    myElement = $(this);
});

How can I check later that myElement is still in the DOM? I can't use .length or any other things like that because it still refer to the saved element and the state of the DOM at this moment, right?

Answer 1

You can check element parent:

function isInDom(obj) {
    var root = obj.parents('html')[0] 
    return !!(root && root === document.documentElement);
}


if(isInDom(myElement)) {
     ...
}

Here's working fiddle: http://jsfiddle.net/vnxhQ/7/

Answer 2

You're probably looking for Node.isConnected.

Answer 3

The only reliable way I see so far is to check if the element is inside document.getElementsByTagName('*')

function isInDoc(element)
{
  var elements=document.getElementsByTagName(element.tagName);
  for(var i=0;i<elements.length;++i)
  {
    if(elements[i]===element)return true;
  }
  return false;
}

Demo: http://jsfiddle.net/doktormolle/hX8eN/

---

<edit>

Node.contains() seems to be supported by all major browsers, so I would finally suggest this:

if(document.documentElement.contains(myElement))

Demo: http://jsfiddle.net/doktormolle/LZUx3/