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

目前这就是我所拥有的,而且我知道我写的内容存在一些严重的谬误:

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

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

Josh Crozier.. 37

由于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;
}

  This is the Master Parent node
  

    Not Parent Node
    Button
    

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

  This is the Master Parent node
  

    Not Parent Node
    Button
    

      Grandbaby Node