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

Question

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 1

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>

Answer 2

You can use Element.matches() to determine if the Event.target has the id #parent-node or if it is a descendant (#parent-node *).

Then, you can use ChildNode.remove() to delete the parent-node element if the condition is false:

document.addEventListener('click', event => {   if (!event.target.matches('#parent-node, #parent-node *')) {     document.getElementById('parent-node').remove();   } });