通过javascript删除父母的孩子答案

【问题标题】：Removing children of a parent through javascript通过javascript删除父母的孩子
【发布时间】：2017-10-26 15:05:25
【问题描述】：

我在 node js 中做了一个聊天应用程序，我在其中动态加载每个用户的消息。当点击用户的名字时，他们的消息同时被检索。但是我想要做的是，当我检索用户的消息并尝试检索第二个或第三个用户的消息时，我想删除已经检索到的消息。哪些是父 div 元素的子元素，其类名 ("indChatBody") 并且每条消息都是此类的子元素，我只是通过 javascript 动态创建这些子元素，这就是为什么我要删除这些子元素javascript。

我试过的代码是：

    var chatBody = document.getElementsByClassName("indChatBody")[0]
    var ch = document.getElementsByClassName("mess");
    var len = chatBody.children.length;
    for(var i =0;i<len;i++){
    	console.log(i);
      chatBody.removeChild(ch[i]);
    }

此代码显示运行时错误，即custom.js:108 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. 到目前为止我编写的代码确实删除了一些子项，但随后显示错误，通过在 chrome 的控制台中执行它，一次又一次地删除整个孩子然后。但我不知道为什么会出现异常。

【问题讨论】：

Remove all child elements of a DOM node in JavaScript的可能重复

标签： javascript

【解决方案1】：

您正在从 0 循环到数组的原始长度。但是每次循环时，都会从这个数组中删除一个元素。在某些时候，您超出了索引。

您可以组合一个 while 循环 element.hasChildNodes() 并删除第一个孩子，直到没有更多孩子为止：

var chatBody = document.getElementsByClassName("indChatBody")[0]
   
while (chatBody.hasChildNodes()) {
  chatBody.removeChild(chatBody.firstChild);
}

<div class="indChatBody">
  <div class="mess">
     Message #1
  </div>
  <div class="mess">
     Message #2
  </div>
  <div class="mess">
     Message #3
   </div>
 </div>

【讨论】：

另一个经典的解决方案是使用反向 for 循环。

【解决方案2】：

ch 不是数组而是列表，这意味着当您删除一个元素时，它也会从列表中删除。因此，您可以通过删除来更改列表的长度。你不需要长度

 while(ch[0]){
    chatBody.removeChild(ch[0]);
 }

【讨论】：