Checking if node exists in Javascript

Question

Here's the deal - I've got a load of elements on a page, and I'm using Javascript to remove some of them (this.parentNode.removeChild(this)) which is working great. However, if I have a variable referring to this node, then remove the node, the variable does NOT lose it's value! But if I then try and perform some other actions on this element, I get errors!

Example:

var element = document.getElementById('ooolookatmeimanelement');
element.parentNode.removeChild(element);
alert(element);

I still get "[Object HTMLblahblahblah]" in the alert, rather than null or undefined - anyone got any ideas how I can check to see if the node has been removed? It's probably something really simple that I'm oblivious to!

Felix Kling · Accepted Answer · 2011-03-21 12:15:01Z

9

If you remove the node, remove the references too. E.g. in your code, assign null to element:

element = null;

Or if this is not possible, you can always check the value of parentNode. It should give null if the element is not part of the DOM:

if(element.parentNode === null) {
    // element is not part of the DOM
}

But this does not make much sense to me (might depend on the context though): If you removed an element, then you know that you have removed it. Why would you do any further operations on it?

edited Mar 21, 2011 at 12:15

answered Mar 21, 2011 at 12:09

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

HughieW Over a year ago

I'm not sure that's possible in the code I've used - the example I gave is a VERY basic example - I'm actually using TinyMCE, and removing a div which contains an instance of tinyMCE, then later on using a for loop to iterate through all the instances, which of course finds one that no longer exists, but it doesn't know that, so it throws errors at me. I'll see if i can tweak the code I use to remove the object, to stop this from happening :)

HughieW Over a year ago

Using your code and my head (which isn't working much today), I sorted it :) - if(tinymce.editors[i].container.parentNode.parentNode!==null){ // do stuff to the element that definitely exists

ShadowScripter Over a year ago

Works like a charm. I had to patch a plugin using this. The plugin forgot to remove/check HTML references that it had previously removed, so once you tried to do something with the plugin after that, it threw loads of errors.

Kamafeather · Accepted Answer · 2017-10-18 22:29:17Z

7

You can also use document.body.contains(element); or $.contains(body, element).

Checking for the parentNode is not reliable; if what is removed is an ancestor of the element, instead of the element itself, then parentNode will still return the parent, while the element is not in the DOM anymore.

var ancestor = document.querySelector('div');
var ghost = document.querySelector('br');
ancestor.parentNode.removeChild(ancestor);
console.log(ghost.id + ' son of ' + ghost.parentNode.id);
console.log(ghost.id + (document.body.contains(ghost) || ' dont') + ' exists in DOM');

<div id="ancestorToRemove">
    <p id="a bitch">
        <br id="you">
    </p>
</div>

edited Oct 18, 2017 at 22:29

answered Oct 18, 2017 at 22:10

Kamafeather

10.1k15 gold badges79 silver badges111 bronze badges

1 Comment

JWMarchant Over a year ago

This should be the accepted answer if you don't know how many parentNodes there are

Alnitak · Accepted Answer · 2011-03-21 12:14:31Z

0

.removeChild() only removes the element from the DOM, and not from memory.

Hence it still exists until it's garbage collected. However you're holding a reference to it, so that won't happen.

answered Mar 21, 2011 at 12:14

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Comments

Sabin · Accepted Answer · 2011-04-06 11:34:30Z

0

Another point that may save time if you're needing to run JavaScript triggered by onClick which does something to itself, you can do this:

onClick="if(!document.getElementById(this.id))return false; YOUR CODE HERE"

For me, this came up when I had a DIV with several children, one of which was a "remove this div" button (actually a DIV made to look like a button). When clicked, this 'button' would remove the DIV from the DOM, as expected, but then would call the onClick event of the DIV itself (which no longer exists). This caused problems. By adding this to my DIV's onClick, I prevented running the code which refers to the DIV after its removal.

edited Apr 6, 2011 at 11:34

answered Apr 6, 2011 at 11:22

Sabin

112 bronze badges

Collectives™ on Stack Overflow

Checking if node exists in Javascript

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related