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?

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?

• javascript
• jquery

8 Answers 8

You're probably looking for Node.isConnected.

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/vnxhQ/7/

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/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/doktormolle/LZUx3/

In order to test if an element still exists in the DOM, you need to crawl the DOM again:

// store it in some shared scope
var myElement;
$(document).click(function() {
    myElement = $(this);
});

// sometime later...
if ($('#' + myElement.attr('id')).length > 0) {
    // it still exists
} else {
    // it no longer exists
}

Your clicked elements must all have ids for this to work, though. A class or any other selector could be used instead.

Edit: see this question for ideas on how to get a unique selector for any given DOM element.

This is assuming you would have the id of possible 'clickable' elements set

var idRef;
$(document).on('click', function() {
    idRef = this.id;    
});

later..

var exists = document.getElementById(idRef).length > 0;

You can the undocumented .selector property of a jQuery object to see if an element is still in the DOM, on the condition that it uses a unique ID. ​Obvious

http://jsfiddle/mblase75/CC2Vn/

$two = $('#two');
console.log($($two.selector).length); // 1
$two.remove();
console.log($($two.selector).length); // 0

See this question for more about how to get the selector of a jQuery object, which may or may not uniquely describe the DOM element(s) it contains.

Just to add something to the fray:

This is really Inferpse's answer slightly tweaked for Dr.Molle's corner case of creating another body element that might house the element removed from the general DOM tree (or, of course, maybe the element was never in the DOM in the first place.) Like Inferspe's answer, it takes a jQuery wrapped object, not the element itself.

function isInDom(jqobj) {
    var someBody = jqobj.parents('body');
    return someBody.length > 0 && someBody.get(0) === document.body;
}
​

I must admit I'm having trouble figuring out how I might try to break that.

Edit: Oh yeah... jsFiddle: http://jsfiddle/vnxhQ/5/

Edit II: of course, if we aren't talking about link or script elements (anything that might go into the head, not the body, I guess that might work fine :-/

Perhaps a better way of implementing Inferpse's function is by extending jQuery:

jQuery.fn.extend({
    isInDom: function() {
        var root = this.eq(0).parents('html')[0];
        return !!(root && root === document.documentElement);
    }
})

Usage:

$("div").isInDom() //returns true if your dom contains a div
$("<div />").isInDom() //returns false
$().isInDom() //returns false