极客笔记JavaScript removeChild
在JavaScript中，我们学习了节点的创建，其中我们创建了几个节点，其中一个节点被称为 父节点 或 根节点 ，而从父节点衍生出的所有其他节点被称为 子节点 。有时候可能会出现需要删除父节点的某些或所有子节点的情况，为此我们需要一种方法来方便地删除子节点。
因此，在本节中，我们将讨论和理解一种方法，通过该方法我们可以从父节点中删除一个子节点。此外，我们还将看一些示例，帮助我们更好地理解这个方法。
removeChild()方法
为了从父节点中移除一个子节点，我们使用 removeChild() 方法。removeChild()方法用于删除节点的子元素。
语法
使用removeChild()方法的语法是：
let childNode = parentNode.removeChild(childNode);
在语法中， childNode 是我们想要从其父节点中移除的节点元素。因此，作为参数值，我们传递要移除的childNode值。另外，如果childNode中指定的子节点不是指定的 parentNode 的一部分，则该方法会抛出一个异常。然而，如果指定的childNode存在于其parentNode中，那么 removeChild() 方法将从DOM中移除并返回该childNode，但它不会从内存中移除该节点，而是将其保留在内存中。
因此，如果我们不想在内存中保留该指定的childNode，并且想要将其从内存中移除，请使用以下语法：
parentNode.removeChild(childNode);
在这个语法中，我们可以注意到我们没有将被移除的childNode存储在任何变量中（就像上面的语法中一样），这意味着被移除的元素也不会在内存中被存储在任何地方。然而，它仍然会存在于内存中，直到JS垃圾收集器销毁它。
现在，让我们看一些示例，这些示例会帮助我们更好地理解这个概念。
JavaScript removeChild()示例
让我们来看一些示例，以便更好地理解removeChild()方法的实际应用：
示例1：
<html>
<body>
<ul id = "id_1">
<li>John</li>
<li>Rone</li>
<li>Jessy</li>
<li>Daisy</li>
<li>Harry</li>
</ul>
<script>
var getChild = document.getElementById("id_1");
getChild.removeChild(getChild.childNodes[1]);//Removing the first child in the list
</script>
</body>
</html>
上述代码的输出如下所示：
代码解释:
- 上面的代码是一个HTML和JavaScript实现，我们创建了一个无序列表，其中包含一些列表项。此外，列表还提供了一个id，即id=”id_1″。
- 在脚本部分，我们通过document.getElementById获取了无序列表的id。
- 从代码中我们可以了解到，’getChild’是 parentNode ， 指定的索引 1 是 childNode 的值，是我们要移除的子元素。
- removeChild()方法会搜索索引值为1的元素，然后将其从列表中返回并删除。
- 如果方法没有找到指定的项，它会抛出找不到指定项的异常。
- 此外，在从列表中移除后，该项仍然存储在内存中，因为我们没有将其从内存中删除。
示例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul id="id_2">
<li>Ready</li>
<li>Steady</li>
<li>Go</li>
</ul>
<script>
let getChild = document.getElementById('id_2');
getChild.removeChild(getChild.lastElementChild);//To remove the last element in the list
</script>
</body>
</html>
上述代码的输出如下所示：
在这个示例中，我们从列表中移除了最后一个子元素。
在代码中：
- 我们通过在其中列出一些元素来创建了一个无序列表。
- 同时，我们为
<ul>元素创建了一个’id = id_2’，这将有助于通过document.getElementById()方法获取列表项。 - 在JS代码中，我们使用removeChild()方法从列表中移除了最后一个子元素。
注意：removeChild()方法仅用于从根元素中删除一个子元素，但如果我们想要从根元素中删除所有子元素，还有其他可用的方法可以实现。
删除所有子节点
为了删除根节点的所有子节点，我们可以通过以下方式实现：
方法1
按照以下步骤删除元素的所有子节点：
- 使用 firstChild 属性获取元素的第一个节点。
- 同样，重复上一步，直到所有子元素都从其父节点中删除。
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是一种删除元素的所有子节点的方法，但不建议使用该方法。
所以，这些是我们可以删除一个或所有子节点的方法。