Проверьте, если элемент clicked является потомком родителя, в противном случае удалить родительский элемент

Я пытаюсь написать script в vanilla JS (no 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'>. Поэтому, если я нажму там, он не избавится от родительского node и всех его потомков. div и его потомки должны ТОЛЬКО удаляться динамически при нажатии за пределами родительского div.

В настоящее время это то, что у меня есть, и я знаю, что есть некоторые серьезные ошибки в том, что я написал:

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

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

Ответы

Ответ 1

Так как event.target является ссылкой на элемент clicked, вы можете проверить, есть ли #parent-node event.target или если он contains 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>