Javascript 检查单击的元素是否是父元素的后代，否则删除父元素

我试图用vanilla JS（没有jQuery）编写一个脚本，如果有人在这个元素之外单击，它将从页面中删除一个元素

但是，这个

div

有许多嵌套元素，我设置它的方式是，即使单击第一个元素中的元素，它也会消失

标记示例：

<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> 

由于是对单击元素的引用，因此可以检查父节点是否是

事件.target

，或者它是否是

事件.target

的子元素

在下面的代码段中，事件侦听器附加到文档。如果触发单击事件的元素不是

#父节点

的后代，也不是

#父节点

，则该元素将被删除

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（“单击”），函数（e）{
var元素=document.getElementById（'parent-node'）；
if（e.target！==element&&！element.contains（e.target））{
element.parentNode.removeChild（元素）；
}
});
父节点{
背景色：#f00；
}

这是主父节点
非父节点
按钮
孙婴结

您可以使用来确定是否具有id

#父节点

，或者它是否是子节点（

#父节点*

）

然后，如果条件为

false

，则可以使用删除父节点

元素：

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

你说得对，这已经被问了很多次了。怎么了？（将这个从jQuery改编为vanilla JS很简单）为什么要从jQuery改编？最好先学习JavaScript基础知识，然后再处理像jQuery这样的库。特别是如果有人想像问题中提到的那样！这正是我想要的，谢谢。这里的键是
target
和
contains
。谢谢！我不敢相信我在谷歌上搜索了我的具体问题，而这恰恰回答了我的问题。如果想要在自制模式之外的任何地方实现单击/点击，则会将其关闭。非常好，非常感谢你的回答！
document.addEventListener('click', event => {
  if (!event.target.matches('#parent-node, #parent-node *')) {
    document.getElementById('parent-node').remove();
  }
});