JavaScript chatbot - deleting the whole frame rather than just the message-CodePudding

I have the following webpage with chatbot inside. When you click a message it deletes it (pop up option) but this also happens (deletion option) when you try to click the outside of the frame and just inside the frame (not on a message) - which I want to prevent.

repl.it:

https://replit.com/@amalsheikh2309/WhisperedRelevantOutsourcing#index.html

Here is my code:

<!DOCTYPE html>
<html>
<head>
  <title>Chat Room</title>
  <style>
    body {
      background-color: #f2f2f2;
    }
    #chatroom {
      width: 500px;
      height: 400px;
      border: 1px solid #ccc;
      padding: 10px;
      overflow: scroll;
      font-family: Arial, sans-serif;
      color: #333;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 2px #ccc;
    }
    #messages {
      height: 350px;
      overflow: scroll;
      background-color: #fff;
      padding: 10px;
      border-radius: 3px;
    }
    #messages div {
      margin-bottom: 10px;
      padding: 10px;
      background-color: #f9f9f9;
      border-radius: 3px;
    }
    #message-input {
      padding: 10px;
      border-radius: 3px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      width: 100%;
      margin-bottom: 10px;
    }
    #send-button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      font-size: 16px;
    }
    body {
  display: flex;
  justify-content: center;
  align-items: center;
}

  </style>
</head>
<body>
  <div id="chatroom">
    <div id="messages"></div>
    <form>
      <input type="text" id="message-input" placeholder="Type your message here...">
      <button type="submit" id="send-button">Send</button>
    </form>
  </div>
  
  <script>
    
    const messageInput = document.getElementById('message-input');
    const messagesContainer = document.getElementById('messages');

    
    document.querySelector('form').addEventListener('submit', (e) => {
      e.preventDefault();

      
      const message = messageInput.value;

    
      messageInput.value = '';

      
      const messageElement = document.createElement('div');
      messageElement.innerText = message;
      messagesContainer.appendChild(messageElement);
      messagesContainer.scrollTop = messagesContainer.scrollHeight;
    });
    document.getElementById("messages").addEventListener("click", function(e) {
    if (e.target && e.target.nodeName == "DIV") {
        var message = confirm("Are you sure you want to delete this message?");
        if (message == true) {
            e.target.remove();
        }
    }
});

  </script>
</body>
</html>

I can see that the problem lies here

document.getElementById("messages").addEventListener("click", function(e) {
    if (e.target && e.target.nodeName == "DIV") {
        var message = confirm("Are you sure you want to delete this message?");
        if (message == true) {
            e.target.remove();
        }
    }
});

but I am not sure how to prevent it deleting the entire DIV and what to replace that part of the code with.

Thanks in advance.

CodePudding user response：

ok so i figured it out after you append messageElement text. add classlist of message then in your if statement if (e.target && e.target.classList.contains("message")) {

this should only activate click event when you click on a message

<!DOCTYPE html>
<html>
<head>
  <title>Chat Room</title>
  <style>
    body {
      background-color: #f2f2f2;
    }
    #chatroom {
      width: 500px;
      height: 400px;
      border: 1px solid #ccc;
      padding: 10px;
      overflow: scroll;
      font-family: Arial, sans-serif;
      color: #333;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 2px #ccc;
    }
    #messages {
      height: 350px;
      overflow: scroll;
      background-color: #fff;
      padding: 10px;
      border-radius: 3px;
    }
    #messages div {
      margin-bottom: 10px;
      padding: 10px;
      background-color: #f9f9f9;
      border-radius: 3px;
    }
    #message-input {
      padding: 10px;
      border-radius: 3px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      width: 100%;
      margin-bottom: 10px;
    }
    #send-button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      font-size: 16px;
    }
    body {
  display: flex;
  justify-content: center;
  align-items: center;
}

  </style>
</head>
<body>
  <div id="chatroom">
    <div id="messages"></div>
    <form>
      <input type="text" id="message-input" placeholder="Type your message here...">
      <button type="submit" id="send-button">Send</button>
    </form>
  </div>
  
  <script>
    
    const messageInput = document.getElementById('message-input');
    const messagesContainer = document.getElementById('messages');

    
    document.querySelector('form').addEventListener('submit', (e) => {
      e.preventDefault();

      
      const message = messageInput.value;

    
      messageInput.value = '';

      
      const messageElement = document.createElement('div');
      messageElement.innerText = message;
      messagesContainer.appendChild(messageElement);
   messageElement.classList.add("message");
      messagesContainer.scrollTop = messagesContainer.scrollHeight;
    });
    document.getElementById("messages").addEventListener("click", function(e) {
     if (e.target && e.target.classList.contains("message")) {
        var message = confirm("Are you sure you want to delete this message?");
        if (message == true) {
            e.target.remove();
        }
    }
});

  </script>
</body>
</html>

CodePudding user response：

You have added event listener to #messages div that's why it removes all children from the #messages div. Instead of #messages div you should add click event listener to single message.