JavaScript removeChild

在 JavaScript 中，我们已经学习了节点的创建，其中我们创建了几个节点，一个节点被称为父节点或根节点，所有其他来自父节点的节点都称为子节点。有时我们可能需要删除父节点的部分或全部子节点，这时我们就需要一种方法来轻松删除子节点。

因此，在本节中，我们将讨论并理解用于从父节点删除子节点的方法。我们还将看一些有助于我们更好地理解该方法的示例。

removeChild() 方法

为了从父节点删除子节点，我们使用removeChild() 方法。removeChild() 方法用于删除节点的子元素。

语法

使用 removeChild() 方法的语法是

在语法中，childNode 是我们要从其父节点中删除的节点元素。因此，作为参数值，我们传递要删除的 childNode 值。另外，如果 childNode 中指定的子节点不是指定parentNode 的一部分，则该方法将抛出异常。但是，如果指定的 childNode 存在于其父节点中，则removeChild() 方法将从 DOM 中删除并返回该 childNode，但它不会从内存中删除该子节点，并将其保留在那里。

因此，如果我们也不想将指定的 childNode 保存在内存中，并且想将其从内存中删除，请使用以下语法

在此语法中，我们可以注意到，我们没有将删除的 childNode 存储在任何变量中（如上一个语法所示），这意味着被删除的元素也不会存储在内存中的任何位置。但是，它仍然存在于内存中，直到 JS 垃圾回收器将其销毁。

现在，让我们看一些示例，它们将帮助我们更好地理解这个概念。

JavaScript removeChild() 示例

让我们看一些示例来理解 removeChild() 方法的实际实现。

示例 1

上述代码的输出如下所示

代码解释

• 上面的代码是 HTML 和 JavaScript 实现，我们在其中创建了一个包含一些列表项的无序列表。此外，该列表还提供了一个 id，即 id="id_1"。
• 在脚本部分，我们通过 document.getElementById 获取了无序列表的 id。
• 我们可以理解，在代码中，'getChild' 是parentNode，指定的索引1 值作为childNode 值是要删除的子元素。
• removeChild() 方法搜索索引值为 1 的元素，然后返回并从列表中删除该元素。
• 如果该方法未找到指定的项，它将抛出指定项未找到的异常。
• 此外，在从列表中删除后，该项仍将保留在内存中，因为我们尚未从内存中将其删除。

示例 2

上述代码的输出如下所示

在此示例中，我们删除了列表中的最后一个子元素。

在代码中：

• 我们创建了一个无序列表，其中包含一些元素。
• 此外，我们为
  元素创建了一个 'id = id_2'，这将有助于通过 document.getElementById() 方法获取列表项。
  • 在 JS 代码中，我们使用 removeChild() 方法删除了列表中的最后一个子元素。

  注意：removeChild() 方法仅用于从根元素中删除一个子元素，但如果我们想从根元素中删除所有子元素，还有其他可用方法可以用来删除根节点的所有子元素。

  删除所有子节点

  为了删除根节点的所有子方法，可以通过以下方式进行：

  方法 1

  请按照以下步骤删除元素的所有子节点：

  1. 使用firstChild 属性并获取元素的第一个节点。
  2. 同样，重复此步骤，直到所有子元素都从其父节点中删除。
  let getChild = document.getElementById('id_1'); while (getChild.firstChild) { getChild.removeChild(getChild.firstChild); }

  方法 2

  另一种方法是使用父节点的 innerHTML 属性，将其设置为 innerHTML = ""，即一个空字符串。该方法的使用如下所示：

  let getChild = document.getElementById('id_1'); getChild.innerHTML = '';

  但是，innerHTML 是用于删除元素所有子节点的方法，但不推荐使用此方法。

  因此，这些就是我们可以从元素中删除一个或所有子节点的方法。

  ---

  下一主题JavaScript 中从 select 列表删除选项
   
  ← 上一篇 下一篇 →