How to check if an element exists in DOM or not in JavaScript

Question

I removed an element from DOM with this code :

box1.parentNode.removeChild(box1);

How can I check if box1 is in the DOM or not.

I want this because if I'll try to remove it from the DOM again, this will cause an error.

could you please make your question more clear? (i was not downvoting) — CoderPi
– CoderPi, Commented Dec 20, 2015 at 17:48
Why downvoting? His questions looks clear to me even the English if the english is not great. if (box1) { box1.parentNode.removeChild(box1); } ? — Aamir Afridi
– Aamir Afridi, Commented Dec 20, 2015 at 17:49
Possible duplicate of How to find with javascript if element exists in DOM or it's virtual (has been just created by createElement) — JJJ
– JJJ, Commented Dec 20, 2015 at 17:50

Zakaria Acharki · Accepted Answer · 2015-12-20 18:16:43Z

4

The Node.contains() method returns a Boolean value indicating whether a node is a descendant of a given node or not.

You can use Contain :

if( node.contains( otherNode ) ){
    //Your code here
}

NOTE : To check in all the DOM use document.contains(node).

Hope this helps.

edited Dec 20, 2015 at 18:16

answered Dec 20, 2015 at 17:50

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

Comments

MinusFour · Accepted Answer · 2015-12-20 18:04:21Z

3

You can just use the parentNode property to see if the node is attached.

var div = document.querySelector('div');
console.log(div.parentNode !== null); //Attached, true
div.parentNode.removeChild(div);
console.log(div.parentNode !== null); //Not attached, false

<div></div>

answered Dec 20, 2015 at 18:04

MinusFour

14.5k4 gold badges32 silver badges39 bronze badges

Comments

CoderPi · Accepted Answer · 2015-12-20 18:14:15Z

1

var box1 = document.getElementById("box1") // EXAMPLE to get an element

if (box1.parentNode && box1.parentNode.contains(box1)) {
  box1.parentNode.removeChild(box1);
}

// Example: won't trigger an error:
if (box1.parentNode && box1.parentNode.contains(box1)) {
  box1.parentNode.removeChild(box1);
}

// Example: would trigger an error:
box1.parentNode.removeChild(box1);

<div id="box1">a</div>
<div id="box2">b</div>
<div id="box3">c</div>

edited Dec 20, 2015 at 18:14

answered Dec 20, 2015 at 17:57

CoderPi

13.2k4 gold badges38 silver badges64 bronze badges

6 Comments

Wand Maker Over a year ago

What happens if box1 is null?

CoderPi Over a year ago

it can't be null, we set it to hold an element. But it might not have an parentElement in the DOM when it's not in the dom (anymore), thats why it checks for parentNode but not for box1 itself

Wand Maker Over a year ago

I meant if box1 element was not in DOM, wouldn't document.getElementById("box1") return null?

CoderPi Over a year ago

:D I saw your answer, and be assured I did not downvote it. But document.getElementById("box1") is just an example 😉 to get an Element

Wand Maker Over a year ago

No worries. I was trying to check whether you should be using box1 && box1.parentNode...

|

Collectives™ on Stack Overflow

How to check if an element exists in DOM or not in JavaScript

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related