如何避免JS中appendChild渲染重复聊天节点及关闭移除节点

针对你遇到的两个问题，直接给出可落地的修改方案：

1. 避免重复创建聊天子节点 #

在渲染聊天窗口前，先检查目标用户的聊天窗口是否已经存在，存在则不再重复创建。修改renderUserChat方法：

//render user chat with someone
renderUserChat: function (num) {
    // 优先检查是否已存在该用户的聊天窗口
    const existingChat = chatWithList.querySelector(`.chat-with__item[user-num="${num}"]`);
    if (existingChat) {
        // 可选：如果需要切换到已存在的窗口，这里可以添加高亮/前置逻辑
        return; // 存在则直接返回，不重复创建
    }

    chatWithItem = document.createElement("li");
    chatWithItem.classList.add("chat-with__item");
    chatWithItem.setAttribute('user-num', num);
    chatWithItem.innerHTML = `
                            <div class="chat-with__top">
                                <div class="chat-with__img">
                                    <img src="${this.users[num].img}" alt="${this.users[num].name}">
                                    <span class="user__status ${this.users[num].status}"></span>
                                </div>
                                <p class="chat-with__name">${this.users[num].name}</p>
                                <i class="fa-solid fa-xmark"></i>
                            </div>
                            <div class="chat-with__body">
                            <ul class="chat__text">
                                <li class="chat-text__user">Hey. 👋</li>
                                <li class="chat-text__user user__chatting">I am here</li>
                                <li class="chat-text__user user__chatting">What's going on?</li>
                                <li class="chat-text__user">Have you finished the "project 2" yet?</li>
                                <li class="chat-text__user user__chatting">I have been fixed bugs</li>
                                <li class="chat-text__user">OK.</li>
                            </ul>
                            </div>
                            <div class="chat-width__footer">
                                <i class="fa-solid fa-image"></i>
                                <i class="fa-solid fa-folder"></i>
                                <div class="chat-width__input">
                                    <input type="text" id="send-sms" name="send SMS" placeholder="...">
                                </div>
                                <i class="fa-solid fa-paper-plane-top"></i>
                            </div>
    `;

    // --- 新增：绑定关闭事件 ---
    const closeBtn = chatWithItem.querySelector(".chat-with__top i");
    closeBtn.onclick = () => {
        chatWithList.removeChild(chatWithItem);
    };

    chatWithList.appendChild(chatWithItem);
}

2. 正确移除对应聊天子节点 #

删除handleEvents中重复绑定点击事件的冗余代码，改为在创建聊天窗口时直接给关闭按钮绑定事件（上面代码中已实现）。修改后的handleEvents：

// event handling when click
handleEvents: function () {
    let _this = this;
    userChatList.onclick = function (e) {
        const userNode = e.target.closest(".user-chat__item");
        if (userNode) {
            const userIndex = Number(userNode.getAttribute("user-num"));
            _this.renderUserChat(userIndex);
        }
    };
}

关键说明 #

• 重复创建问题：通过querySelector根据user-num属性精准查找已存在的聊天窗口，避免重复添加。
• 移除节点问题：在创建元素时直接绑定关闭按钮的点击事件，确保每个关闭按钮只绑定一次，且操作的是当前对应的聊天窗口，不会出现全局变量导致的移除错误。

内容的提问来源于stack exchange，提问作者Mr Paul