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); } });

＆＃13;
＆＃13;
document.addEventListener("click", function(e) { var element = document.getElementById('parent-node'); if (e.target !== element && !element.contains(e.target)) { element.parentNode.removeChild(element); } });
＆＃13;
#parent-node { background-color: #f00; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以使用Element.matches()来确定Event.target的ID为#parent-node还是后代（#parent-node *）。

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

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

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

2 个答案: