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

Question

我正在尝试用 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> 

所以我希望无论一个元素嵌套多深，它都会检查它是否是 <div id='parent-node'> 的后代。元素。所以如果我点击那里，它不会摆脱父节点及其所有后代。 div只有在父级外部单击时才能动态删除其子代 div .

目前这就是我所拥有的，我知道我写的内容有一些严重的谬误:

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

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

Answer 1

从 event.target 是对点击元素的引用，可以查看#parent-node是 event.target或者如果它 contains event.target作为后代元素。

Example Here

在下面的代码片段中，事件监听器附加到文档。如果触发点击事件的元素不是 #parent-node 的后代不是#parent-node ，然后删除该元素。

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>