How to disable a div after only one click in javascript without disabling click event on elements within it?

Question

I'm trying to create a button on a click inside elemId div. But want the button to be appended only once and then disable the click event on the div alone but not on the button element.

 document.getElementById('elemId').addEventListener('click', 
   function(e){

   var button = document.createElement("button");
   var buttonText = document.createTextNode("click me");
   button.appendChild(buttonText);
   document.getElementById('elemId').appendChild(button)


   document.getElementById('elemId').removeEventListener('click', 
     function(e){
     // removeEventListener doesn't work
  })

   document.getElementById('elemId').disabled = true 
     // disabled  doesn't work 
  })

html:

<div style="background-color: teal; height: 100px; width: 100px; " id="elemId">Count</div>

Answer 1

You can name your function anything you want I named it 'x' in this example and then reference that when you want to remove the click event listener.

 document.getElementById('elemId').addEventListener('click', function x(e) { var button = document.createElement("button"); var buttonText = document.createTextNode("click me"); button.appendChild(buttonText); document.getElementById('elemId').appendChild(button) document.getElementById("elemId").removeEventListener("click", x); }) 

 <div style="background-color: teal; height: 100px; width: 100px; " id="elemId">Count</div> 

Answer 2

Create the function/handler and after the element creation process remove that handler using the function removeEventListener .

This approach creates a function to accomplish your requirements, further, you will be able to recover that handler to bind it again.

 document.getElementById('elemId').addEventListener('click', handler); function handler(e) { var button = document.createElement("button"); var buttonText = document.createTextNode("click me"); button.appendChild(buttonText); document.getElementById('elemId').appendChild(button) document.getElementById('elemId').removeEventListener('click', handler); } 

 <div style="background-color: teal; height: 100px; width: 100px; " id="elemId">Count</div> 

Answer 3

You want to make sure you have a function handler. The way you're doing it doesn't work because you're not removing the proper event listener. You're using an anonymous function, but you need to point to the actual function handler used for the event to be removed.

Also, I'm not sure what you are trying to do with disabling your div. I removed that line, because you can't disable a div.

I also refactored a bit to make the code a bit cleaner and easier to read.

 document.getElementById('elemId').addEventListener('click', addButton, false); function addButton() { var button = document.createElement("button"); var buttonText = document.createTextNode("click me"); var clickElement = document.getElementById('elemId'); button.appendChild(buttonText); clickElement.appendChild(button); clickElement.removeEventListener('click', addButton, false); } 

 <div style="background-color: teal; height: 100px; width: 100px; " id="elemId">Count</div>