jordanhudgens · April 10, 2018 02:56
diff --git a/remove.html b/remove.html
 <!DOCTYPE html>
 <html lang='en'>

 <head>
  <meta charset='UTF-8'>
  <title></title>
 </head>

 <body>
  <div class="widget">
    <input type="text" id="chat-input">
    <button id="show-profile" onclick="sendMessage()">Show Social</button>
    <button onclick="clearMessages()">Clear Messages</button>
  </div>
 </body>

 <script>
  function sendMessage() {
    const newDiv = document.createElement("div");
    newDiv.classList.add('chatMsg');
    let chatInput = document.querySelector('#chat-input').value;
    const newContent = document.createTextNode(chatInput);
    newDiv.appendChild(newContent);

    const widget = document.querySelector(".widget");
    let chatWrapper = document.querySelector("show-profile");
    document.querySelector('#chat-input').value = '';

    if (document.querySelectorAll('.chatMsg').length > 0) {
      chatWrapper = document.querySelectorAll('.chatMsg')[0];
    }

    widget.insertBefore(newDiv, chatWrapper);
  }

  function clearMessages() {
    const messages = document.querySelectorAll('.chatMsg');
    messages.forEach(el => el.remove());
  }

 </script>

 </html>