0

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.

Madacol
  • 3,611
  • 34
  • 33
Fakhrane Nassiry
  • 615
  • 1
  • 5
  • 7
  • could you please make your question more clear? (i was not downvoting) – CoderPi Dec 20 '15 at 17:48
  • 1
    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 Dec 20 '15 at 17:49
  • Can you provide proper details? – Inacio Schweller Dec 20 '15 at 17:49
  • 1
    Possible duplicate of [How to find with javascript if element exists in DOM or it's virtual (has been just created by createElement)](http://stackoverflow.com/questions/2719002/how-to-find-with-javascript-if-element-exists-in-dom-or-its-virtual-has-been-j) – JJJ Dec 20 '15 at 17:50
  • Down voting because OP ***haven't tried Googling.*** – nicael Dec 20 '15 at 17:52
  • upvoting because google kept sending me to an unrelated question with similar wording https://stackoverflow.com/questions/384286/how-do-you-check-if-a-javascript-object-is-a-dom-object – Madacol Feb 27 '22 at 11:23

3 Answers3

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.

Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
4

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>
MinusFour
  • 13,913
  • 3
  • 30
  • 39
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>
CoderPi
  • 12,985
  • 4
  • 34
  • 62
  • What happens if `box1` is `null`? – Wand Maker Dec 20 '15 at 18:03
  • 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 – CoderPi Dec 20 '15 at 18:05
  • I meant if `box1` element was not in DOM, wouldn't `document.getElementById("box1")` return null? – Wand Maker Dec 20 '15 at 18:10
  • :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 – CoderPi Dec 20 '15 at 18:13
  • No worries. I was trying to check whether you should be using `box1 && box1.parentNode...` – Wand Maker Dec 20 '15 at 18:14
  • Well I thought about that when writing the code, but I think its obsolete since if you are using a var you should know what it is – CoderPi Dec 20 '15 at 18:15