Question

我在节点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的控制台中一次又一次地执行它来显示错误然后删除整个孩子。但我不知道为什么我会得到例外。

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

Answer 2

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

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

通过javascript删除父母的子女

2 个答案: