Dear1ofGdBear Dear1ofGdBear - 4 years ago 199
Javascript Question

Check if clicked element is descendant of parent, otherwise remove parent element

I am trying to write a script in vanilla JS (no jQuery) that will remove an element from the page if someone clicks outside of this element.

However, this

div
has many nested elements and the way I had it set up is that it disappears even by clicking an element that is within the first element.

Example markup:

<div id='parent-node'>
This is the Master Parent node
<div id ='not-parent-node'>
Not Parent Node
<button>Button</button>
<div id='grandchild-node'>
Grandbaby Node
</div>
</div>
</div>


So I would like that no matter how deeply nested an element is, it will check to see if its a descendant of the
<div id='parent-node'>
element. So if I click there, it will not get rid of the parent node and all its descendants. The
div
and its descendants should ONLY be removed dynamically when clicking outside of the parent
div
.

Currently this is what I have and I do know there are some serious fallacies in what I wrote:

function remove(id) {
return (elem = document.getElementById(id)).parentNode.removeChild(elem);
}

document.addEventListener("click", function (e) {
remove('parent-node');
});

Answer Source

Since event.target is a reference to the clicked element, you can check to see if #parent-node is event.target or if it contains event.target as a descendant element.

Example Here

In the snippet below, an event listener is attached to the document. If the element that triggered the click event isn't a descendant of #parent-node and isn't #parent-node, then the element is removed.

document.addEventListener("click", function(e) {
  var element = document.getElementById('parent-node');

  if (e.target !== element && !element.contains(e.target)) {
    element.parentNode.removeChild(element);
  }
});

document.addEventListener("click", function(e) {
  var element = document.getElementById('parent-node');
  
  if (e.target !== element && !element.contains(e.target)) {
    element.parentNode.removeChild(element);
  }
});
#parent-node {
  background-color: #f00;
}
<div id='parent-node'>
  This is the Master Parent node
  <div id='not-parent-node'>
    Not Parent Node
    <button>Button</button>
    <div id='grandchild-node'>
      Grandbaby Node
    </div>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download