javascript中的"remove"和"removeChild"方法有什么区别? [英] What is the difference between 'remove' and 'removeChild' method in javascript?
问题描述
我创建了一个HTML页面，以了解删除元素的工作方式.
I have created an HTML page to understand how removing an element works.
代码:
<html>
<head>
<script>
var childDiv = null;
var parent1 = null;
var parent2 = null;
function init() {
childDiv = document.getElementById("child");
parent1 = document.getElementById("parent1");
parent2 = document.getElementById("parent2");
}
function rem() {
if (childDiv) {
childDiv.remove();
alert("child removed");
} else {
alert("child does not exist");
}
}
function remChild() {
if (childDiv){
if (parent1.children.length > 0) {
parent1.removeChild(childDiv);
alert("child unbound from parent");
} else {
alert("child exists but is not bound to parent");
}
} else {
alert("child does not exist");
}
}
function ins() {
if (childDiv) {
parent2.appendChild(childDiv);
alert("child inserted to another parent");
}
}
</script>
</head>
<body onload="init()">
<div id="parent1">
<div id="child"></div>
</div>
<div id="parent2"></div>
<button onclick="rem()">remove</button>
<button onclick="remChild()">removeChild</button>
<button onclick="ins()">insert</button>
</body>
</html>
在这里，我尝试通过两种方式删除子" div:
Here I try to remove the 'child' div in 2 ways:
-
通过在子" div上调用删除"方法
By calling 'remove' method on 'child' div
通过在"parent1"节点上调用"removeChild"方法
By calling 'removeChild' method on 'parent1' node
但是在两种情况下，实际上都不会删除该节点.我总是可以将'child'div插入'parent2'.
But in both the cases, the node is not actually removed. I can always insert 'child' div to 'parent2'.
我可以理解，在第二种情况下，子级"与"parent1"级没有绑定，实际上并未删除.但是在第一种情况下，孩子"是否不会被永久删除?
I can understand that in second case, the 'child' is unbound from 'parent1' and not actually deleted. But in first case, is the 'child' not removed permanently?
尝试插入不存在的元素时我不会收到错误消息吗?
Shouldn't I get an error while trying to insert an element which does not exist?
请解释.
如果该元素确实存在，即使在对元素调用删除"后也是如此:
And if the element does exist even after calling 'remove' on element:
-
删除"与"removeChild"有何不同?如我所见，这两种方法都只是使子级与父级解除绑定，但是element仍然占用内存.
How is 'remove' different from 'removeChild'? As I see, both these methods just unbound child from parent, but element still occupies the memory.
有什么方法可以确保从内存中真正删除元素?
Is there any way to ensure that element is actually removed from memory?
推荐答案
该节点实际上并未删除
the node is not actually removed
困惑可能是因为您可能认为删除元素意味着杀死或破坏它.
The confusion might be because you might think removing an element means something like killing or destroying it.
但是实际上，删除的概念基本上意味着破坏孩子与其父母之间的关系.这只是一个支队.
But in fact, the concept of removal basically means breaking the relationship between a child and its parent. It's just a detachment.
尝试插入不存在的元素时我不会收到错误消息吗?
Shouldn't I get an error while trying to insert an element which does not exist?
不，因为它仍然存在.
remove与removeChild有何不同?
remove仅需要对子项的引用. removeChild需要同时引用父级和子级.结果是相同的.
remove only needs a reference to the child. removeChild needs a reference both to the parent and the child. The result is identical.
有什么方法可以确保从内存中真正删除元素?
Is there any way to ensure that element is actually removed from memory?
不.您只能取消引用它，并希望有一个垃圾收集器来检测未引用的对象，然后将其删除.
No. You can only unreference it and hope that there is a garbage collector which will detect the object is not referenced and then will remove it.
这篇关于javascript中的"remove"和"removeChild"方法有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
