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

Question

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

​

Answer 2

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

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

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