On clicking button, an alert message pops up. The issues is that the alert message is popping up twice. I know its because of adding "click" event but I remove the event before adding the "click" event again. So why is it not working? Please run the snippet that I attached to this post to understand. Thank you
HTML
<html>
<div class="main"></div>
</html>
JAVASCRIPT
class RenderOne {
renderOne() {
return `
<button class="add-btn">Add</button>
`
}
renderData() {
const mainContain = document.getElementsByClassName("main")
mainContain[0].innerHTML = this.renderOne()
}
clickBtn() {
const addBtn = document.getElementsByClassName("add-btn")
addBtn[0].addEventListener("click", () => {
alert("I was clicked")
})
}
removeEvent() {
const addBtn = document.getElementsByClassName("add-btn")
addBtn[0].removeEventListener("click", this.clickBtn())
}
}
class TestingMain {
render() {
const render = new RenderOne()
render.renderData()
render.removeEvent()
}
}
class RunTest {
renderRunTest() {
const render = new RenderOne()
render.removeEvent()
}
}
let testingMain = new TestingMain()
let runTest = new RunTest()
testingMain.render()
runTest.renderRunTest()