how to render appendChild Js without duplicate-CodePudding

I am a new learning JS. Who can help me complete this code. I have 2 problem:

render child Node user Chat when click without duplicate
how to remove child Node user when close chat window

full code is here: Jsfiddle

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

                _this.renderUserChat(userIndex);

                const getChatWithItems = document.querySelectorAll(".chat-with__item");
                getChatWithItems.forEach(item => {
                    item.onclick = function(e){
                        const itemNode = e.target.closest(".chat-with__top i");
                        if(itemNode){
                            chatWithList.removeChild(chatWithItem);
                        }
                    }
                    
                }) 
            }

        }

    },

    //render user chat with someone
    renderUserChat: function (num) {
        // console.log(userIndex);
        chatWithItem = document.createElement("li");
        chatWithItem.classList.add("chat-with__item");
        chatWithItem.setAttribute('user-num', num);
        chatWithItem.innerHTML = `
                                <div >
                                    <div >
                                        <img src="${this.users[num].img}" alt="${this.users[num].name}">
                                        <span ></span>
                                    </div>
                                    <p >${this.users[num].name}</p>
                                    <i ></i>
                                </div>
                                <div >
                                <ul >
                                    <li >Hey.