javascript - 通过 javascript 删除父级的子级

Question

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

我尝试过的代码是:

    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]);
    }

This code display a runtime error, which is custom.js:108 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. The code I have written so far, do remove some of the children but then display the error, by executing it in the console of the chrome, again and again it remove the whole children then. But I don't know why I am getting the exception.

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>