CODEWITHSUNDEEP
javascriptjquery
Valentin Fournier
Valentin Fournier

Reputation: 63

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

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?

Upvotes: 6

Views: 2288

Answers (8)

aryzing
aryzing

Reputation: 5857

You're probably looking for Node.isConnected.

Upvotes: 7

Marten Jacobs
Marten Jacobs

Reputation: 9

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

Upvotes: 0

Dr.Molle
Dr.Molle

Reputation: 117314

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/

Upvotes: 2

JayC
JayC

Reputation: 7141

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.net/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 :-/

Upvotes: 0

Inferpse
Inferpse

Reputation: 4145

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/

Upvotes: 5

Blazemonger
Blazemonger

Reputation: 92893

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.net/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.

Upvotes: 0

st3inn
st3inn

Reputation: 1596

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;

Upvotes: 0

jbabey
jbabey

Reputation: 46647

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.

Upvotes: 0

Related Questions