检查clicked元素是否为parent的后代,否则删除父元素

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或者如果它包含 event.target的后代元素.

这里的例子

在下面的代码段中,事件侦听器附加到文档.如果触发click事件的元素是不能的后裔#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>

Answer 2

您可以使用它Element.matches()来确定Event.targetid是否具有 id#parent-node或者它是否是后代 ( #parent-node *)。

然后，如果条件是，您可以使用ChildNode.remove()删除parent-node元素false：

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