How to check if DOM reference has been destroyed?

Question

Say I select an element the old fashioned way (or any other way by which a DOM reference might be obtained):

var el = document.getElementById('myFavoriteElement');

Then I remove that element's parent from the DOM, thus removing el as well. Or I just remove el directly.

Is there a way to check whether el is still a valid reference, whether the HTML to which it refers still exists in the DOM? Something along the lines of el.hasBeenDestroyed as a boolean attribute, or something like that?

@blex no, that won't work. if you remove `el`, the reference to `el` still exists. — temporary_user_name, Jun 25 '15 at 19:14
How about `document.contains(el);`? [From this post](http://stackoverflow.com/questions/5629684/how-to-check-if-element-exists-in-the-visible-dom) — imtheman, Jun 25 '15 at 19:17
One of the other answers will be more reliable and semantic, but just for fun I noticed that `getBoundingClientRect()` will often change to {0, 0, 0, 0} post-removal — james_womack, Jun 25 '15 at 19:27

score 3 · Accepted Answer · edited Mar 31 '22 at 22:32

3

The baseURI attribute will be filled in if the element is on the page DOM. Check that.

Alternatively, try document.body.contains(node).

Edit: Now in 2022, the DOM node isConnected readonly property provides this information. My experiment shows that the baseURI property remains filled even when removed from the DOM.

edited Mar 31 '22 at 22:32

Stephen Isienyi

1,292
3
17
29

answered Jun 25 '15 at 19:18

Works. Is probably more efficient than document.contains, too. – temporary_user_name Jun 25 '15 at 21:29

blex · Answer 2 · 2015-06-25T19:37:57.707

1

Simply look for a parent.

function hasBeenDestroyed(el){ return !el.parentNode; }

Demo

var el = document.getElementById('myDiv');
document.getElementById('destroyBtn').onclick = function(){ el.outerHTML = ''; };
document.getElementById('checkBtn').onclick = function(){
    if( hasBeenDestroyed(el) ) alert('The div has been destroyed');
    else alert('The div is still here');
};

function hasBeenDestroyed(el){ return !el.parentNode; }

#myDiv{ padding: 1em; background: red; }

<button id="destroyBtn">Destroy the div</button>
<button id="checkBtn">Check if div still exists</button>

<div id="myDiv"></div>

edited Jun 25 '15 at 19:37

answered Jun 25 '15 at 19:26

blex

24,941
5
39
72

An element can have a parentNode but not inside the document. For example if you have a `
` that is not in the document but only as a DOM object, and it has a ``, the `` has a parentNode.
– Zenorbi Jun 25 '15 at 19:28
He's not asking if it's in the document. He's asking if the element (or one of its ancestors) has been destroyed. That's quite different. But I get your point, and yes, that function would not be valid in that case. – blex Jun 25 '15 at 19:31

score 1 · Answer 3 · answered Jun 25 '15 at 19:30

Here is an example using document.contains(el);.

function removeSpan()
{
  var el = document.getElementById("test");
  el.parentNode.removeChild(el);
  document.getElementById("exist").innerHTML = document.contains(el);
}

<div>This is a div. <span id="test">This is a span</span></div>
<button type="button" onclick="removeSpan();">Remove span</button>
<div>Does the span exist? <span id="exist">true</span></div>

Zenorbi · Answer 4 · 2015-06-25T19:26:29.487

0

You cannot check whether it has been destroyed, but you can check whether it is still in the document node.

function inDocument(el) {
    var parentNode = el.parentNode;
    while (parentNode) {
        if (parentNode === document) {
            return true;
        }
        parentNode = parentNode.parentNode;
    }
    return false;
}

edited Jun 25 '15 at 19:26

answered Jun 25 '15 at 19:20

Zenorbi

2,504
2
15
18

Sure, but you could streamline this by saying `while (el) { if (el === document) return true; el = el.parentNode; }`. – Jun 25 '15 at 19:31

How to check if DOM reference has been destroyed?

4 Answers4

Demo