I write a removeeventlistener on a button but it isn t working

Question

We have a button "dice1" that .onclick generates a ramdom img of a dice's face.

So, i need to remove that event (removing the img it builds) clicking on another button "var clearButton", but when I click on it nothing happens.

here's the JS code:

    dice1.addEventListener("click", img);
    function img(){
        
        count++;
        if( count == 1 ) {
                if(ramdom == 1){
                var img1 = document.createElement("img");               
                img1.src = "https://i.ibb.co/HPHsSHp/d1.jpg"; 
                img1.classList.add("Upload");
                var src = document.getElementById("img1");     
                src.appendChild(img1); 
                document.getElementById("img1").className = "position"; 
            }else if(ramdom == 2){
                var img2 = document.createElement("img");
                img2.src = "https://i.ibb.co/ZXmCQxD/d2.jpg";
                img2.classList.add("Upload");
                var src = document.getElementById("img2");
                src.appendChild(img2);
                document.getElementById("img2").className = "position";        
            }else if(ramdom == 3) {
                var img3 = document.createElement("img");   
                img3.src = "https://i.ibb.co/Y0x8K65/d3.jpg"; 
                img3.classList.add("Upload");
                var src3 = document.getElementById("img3");     
                src3.appendChild(img3); 
                document.getElementById("img3").className = "position";
            }else if(ramdom == 4){
                var img4 = document.createElement("img");   
                img4.src = "https://i.ibb.co/8gq6Rfx/d4.jpg"; 
                img4.classList.add("Upload");
                var src = document.getElementById("img4");     
                src.appendChild(img4); 
                document.getElementById("img4").className = "position";
            }else if(ramdom == 5){
                var img5 = document.createElement("img");   
                img5.src = "https://i.ibb.co/WyWjWT9/d5.jpg";
                img5.classList.add("Upload"); 
                var src = document.getElementById("img5");     
                src.appendChild(img5); 
                document.getElementById("img5").className = "position";
            }else if(ramdom === 6){                    
                var img6 = document.createElement("img");   
                img6.src = "https://i.ibb.co/zZrByy0/d6.jpg";
                img6.classList.add("Upload"); 
                var src = document.getElementById("img6");     
                src.appendChild(img6); 
                document.getElementById("img6").className = "position";
                
            }  
        
        }
        let clearButton = document.getElementById('clear');
        clearButton.removeEventListener("click", img);
    } ;

So, i need to remove that dice1.addeventlistener (removing the img it builds) clicking on another button "var clearButton", but when I click on it nothing happens.

Answer 1

Seems you are removing the listener for a wrong button, the fix:

let clearButton = document.getElementById('clear');
clearButton.addEventListener("click", () => dice1.removeEventListener('click', img));

It's not clear also why you want to remove the click listener and leave the button visible. It's not obvious for the user. For better UX I think it's better to disable the button:

function img(){
  alert('img');
}

const dice1 = document.getElementById('dice1');
dice1.addEventListener('click', img);

const clearButton = document.getElementById('clear');
clearButton.addEventListener("click", () => dice1.disabled = !dice1.disabled);

<button id="dice1">DICE</button>
<button id="clear">Clear</button>