Я пытаюсь написать 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');
});