'Delete Elements Created by Event Listener

I'm trying to override an eventlistner so the accumulated text on the screen under "Message Will Add Here" disappears and I can enter new text whenever the user clicks ok in the alert window. But whatever method I use for this doesn't do anything. Can you please tell me what I'm doing wrong? Here is my code:

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="btncontainer">
      <button class="button"type="button" name="button">
        Over or Click Here
      </button>
      <p>MESSAGE WILL ADD HERE</p>
    </div>
    <script type="text/javascript" src="testc.js">
    </script>
  </body>
</html>

Javascript

var btn = document.querySelector('.button');

var count = 1;
var newpar;
var newval;
var container = document.getElementsByClassName('.btncontainer');

function e(){
  newpar = document.createElement('p');
  newpar.className = 'ps'
  newval = document.createTextNode('Was hovered ' + count + ' times');
  newpar.appendChild(newval);
  document.querySelector('.btncontainer').appendChild(newpar);
  count++;
}
btn.addEventListener('mouseover', e);

btn.addEventListener('click',function(){
  count-=1;
  alert(`The button was hovered over ${count} times`);
  count = 0;
  container.removeChild(newpar);
  btn.removeEventListener('mouseover', e);

})

Result

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Delete Elements Created by Event Listener

Sources

Related Questions