[英]Check if clicked element is descendant of parent, otherwise remove parent element
I am trying to write a script in vanilla JS (no jQuery) that will remove an element from the page if someone clicks outside of this element.我正在尝试用 vanilla JS(没有 jQuery)编写一个脚本,如果有人在该元素之外单击,它将从页面中删除一个元素。
However, this div
has many nested elements and the way I had it set up is that it disappears even by clicking an element that is within the first element.但是,这个
div
有很多嵌套元素,我设置它的方式是,即使单击第一个元素内的元素,它也会消失。
Example markup:示例标记:
<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>
So I would like that no matter how deeply nested an element is, it will check to see if its a descendant of the <div id='parent-node'>
element.所以我希望无论元素嵌套有多深,它都会检查它是否是
<div id='parent-node'>
元素的后代。 So if I click there, it will not get rid of the parent node and all its descendants.所以如果我点击那里,它不会摆脱父节点及其所有后代。 The
div
and its descendants should ONLY be removed dynamically when clicking outside of the parent div
. div
及其后代应仅在单击父div
外部时动态删除。
Currently this is what I have and I do know there are some serious fallacies in what I wrote:目前这就是我所拥有的,我知道我写的东西有一些严重的谬误:
function remove(id) {
return (elem = document.getElementById(id)).parentNode.removeChild(elem);
}
document.addEventListener("click", function (e) {
remove('parent-node');
});
Since event.target
is a reference to the clicked element, you can check to see if #parent-node
is event.target
or if it contains event.target
as a descendant element.由于
event.target
是对被单击元素的引用,您可以检查#parent-node
是否为event.target
或者它是否 包含event.target
作为后代元素。
In the snippet below, an event listener is attached to the document.在下面的代码片段中,事件侦听器附加到文档。 If the element that triggered the click event isn't a descendant of
#parent-node
and isn't #parent-node
, then the element is removed.如果触发点击事件的元素不是
#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>
You can use Element.matches()
to determine if the Event.target
has the id #parent-node
or if it is a descendant ( #parent-node *
).您可以使用
Element.matches()
来确定Event.target
是否具有 ID #parent-node
或者它是否是后代 ( #parent-node *
)。
Then, you can use ChildNode.remove()
to delete the parent-node
element if the condition is false
:然后,如果条件为
false
,您可以使用ChildNode.remove()
删除parent-node
元素:
document.addEventListener('click', event => {
if (!event.target.matches('#parent-node, #parent-node *')) {
document.getElementById('parent-node').remove();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.