title: Check if clicked element is descendant of parent, otherwise remove parent element
body: <p>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.</p>
  
  <p>However, this <code>div</code> 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.</p>
  
  <p>Example markup:</p>
  
  <pre><code>&lt;div id='parent-node'&gt;
    This is the Master Parent node
    &lt;div id ='not-parent-node'&gt;
       Not Parent Node
      &lt;button&gt;Button&lt;/button&gt;
      &lt;div id='grandchild-node'&gt;
        Grandbaby Node
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>So I would like that no matter how deeply nested an element is, it will check to see if its a descendant of the <code>&lt;div id='parent-node'&gt;</code> element. So if I click there, it will not get rid of the parent node and all its descendants. The <code>div</code> and its descendants should <em>ONLY</em> be removed dynamically when clicking outside of the parent <code>div</code>.</p>
  
  <p>Currently this is what I have and I do know there are some serious fallacies in what I wrote:</p>
  
  <pre><code>function remove(id) {
      return (elem = document.getElementById(id)).parentNode.removeChild(elem);
  }
  
  document.addEventListener("click", function (e) {
      remove('parent-node');
  });
  </code></pre>