JavaScript 中的“remove”和“removeChild”方法有什么区别？答案

【问题标题】：What is the difference between 'remove' and 'removeChild' method in JavaScript?JavaScript 中的“remove”和“removeChild”方法有什么区别？
【发布时间】：2016-05-03 08:10:15
【问题描述】：

我创建了一个 HTML 页面来了解删除元素的工作原理。

代码：

<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：

通过调用 'child' div 上的 'remove' 方法
通过调用“parent1”节点上的“removeChild”方法

但是在这两种情况下，节点实际上并没有被删除。我总是可以将 'child' div 插入到 'parent2'。

我可以理解，在第二种情况下，'child' 与'parent1' 未绑定，实际上并未被删除。但在第一种情况下，“孩子”是否不会被永久删除？

我在尝试插入不存在的元素时不应该得到错误吗？

请解释一下。

如果在元素上调用“删除”后元素确实存在：

“remove”与“removeChild”有何不同？如我所见，这两种方法都只是从父级中解绑子级，但元素仍然占用内存。
有什么方法可以确保元素实际上从内存中删除？

【问题讨论】：

标签： javascript html

【解决方案1】：

节点实际上并没有被删除

混淆可能是因为您可能认为删除元素意味着杀死或破坏它。

但实际上removal的概念基本上意味着打破孩子与其父母之间的关系。这只是一个支队。

我在尝试插入不存在的元素时不应该得到错误吗？

不，因为它仍然存在。

remove 与 removeChild 有何不同？

remove 只需要对孩子的引用。 removeChild 需要同时引用父母和孩子。结果是一样的。

有什么方法可以确保元素实际上从内存中删除？

没有。您只能取消引用它，并希望有一个垃圾收集器会检测到该对象未被引用然后将其删除。

【讨论】：

附加到节点的事件监听器会发生什么，假设我们附加了一个内联箭头函数，现在没有直接使用removeEventListener的方法，垃圾收集器会自动删除它，还是它会记忆中的存在（我已经阅读了几篇文章）。谢谢

【解决方案2】：

remove 是一个新功能。这是一种快捷方式，可以更轻松地删除元素而无需查找父节点。遗憾的是，旧版本的 Internet Explorer 不支持此功能，因此，除非您不想支持此浏览器，否则您必须使用 removeChild 或 polyfill。

子元素保留在内存中的原因是您的代码保留了对它的引用。

如果你这样做了

childDiv = null;

那么没有指向它的引用，浏览器可以释放内存。

【讨论】：

我尝试通过 'removeChild' 删除 'child' 并删除了对它的引用。这个时间元素也被永久删除。我无法让“孩子”回来。所以'removeChild'不只是从父元素中解绑元素，而是实际上删除它？由于我在代码中保留了参考，我能够得到“孩子”？所以它只是保持引用计数：就像跟踪有多少指针指向一个对象一样？引用计数一为0，就释放内存？
仅供参考，“删除”在 IE 11 上可用。
@Prasoon 在全局范围内，任何不可访问的值（使用引用或 DOM 函数）都可以被引擎释放（并且通常会）。