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

i trying write script in vanilla js (no jquery) remove element page if clicks outside of element.

however, div has many nested elements , way had set disappears clicking element within first element.

example markup:

<div id='parent-node'>   master parent node   <div id ='not-parent-node'>      not parent node     <button>button</button>     <div id='grandchild-node'>       grandbaby node     </div>   </div> </div>  

so no matter how nested element is, check see if descendant of <div id='parent-node'> element. if click there, not rid of parent node , descendants. div , descendants should only removed dynamically when clicking outside of parent div.

currently have , know there serious fallacies in wrote:

function remove(id) {     return (elem = document.getelementbyid(id)).parentnode.removechild(elem); }  document.addeventlistener("click", function (e) {     remove('parent-node'); }); 

since event.target reference clicked element, can check see if #parent-node event.target or if contains event.target descendant element.

example here

in snippet below, event listener attached document. if element triggered click event isn't descendant of #parent-node , isn't #parent-node, element 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'>    master parent node    <div id='not-parent-node'>      not parent node      <button>button</button>      <div id='grandchild-node'>        grandbaby node      </div>    </div>  </div>