how to remove an eventlistener when it's directly added on HTML file

Question

there is a button that I am going to add to the page with innerHTML the button has an eventlistener on it onclick="addWatchlist()" and in bellow, I am going to remove the event from the button by another event listener but I can't do it with removeEventListener("click",addWatchlist). I have readen:

why doesn't removeEventListener work?
Javascript removeEventListener not working
they are about removing events that are added with javascript addEventListener.but here we add the event directly into HTML.

<button class="watch-list-btn" onclick="addWatchlist()">Watchlist </button>

watchlist.addEventListener("click",function(){
    conatinerDown.innerHTML =""
    conatinerDown.innerHTML +=movieWatchlistArray.map(each=> {       
        return each.outerHTML
    }).join("")
// loop through  movie list and changes text and removes event listener.
    for(let i=0 ;i<moviePageNumber;i++ ){
        document.querySelector(`.movie-${i} .watch-list-btn`).textContent = "remove"
        document.querySelector(`.movie-${i} .watch-list-btn`).removeEventListener("click",addWatchlist)
    }
    
})

// adds movie to start of an array called  movieWatchlistArray
function addWatchlist(){
    
    movieWatchlistArray.unshift(document.querySelector(`.movie-${moviePageNumber-1}`))
    console.log(movieWatchlistArray)
    
}

is there a way to remove the event? without changing the HTML to something like :

<button class="watch-list-btn">Watchlist </button>

score 1 · Accepted Answer · answered Mar 01 '22 at 05:37

1

You can get the element and set the onclick attribute to null.

function addWatchlist() {
  console.log('addWatchlist');
}

function removeListener() {
  const button = document.getElementsByClassName('watch-list-btn')[0];
  button.setAttribute('onclick', null);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/marx/4.0.0/marx.min.css" rel="stylesheet"/>
<button class="watch-list-btn" onclick="addWatchlist()">Watchlist</button>
<button onclick="removeListener()">Remove Listener</button>

answered Mar 01 '22 at 05:37

Will

3,201
1
19
17

going to test it – alireza Mar 01 '22 at 05:40
nice! each element has all of the events in their prototype and is set to null that way we overwrite the value to be null again am I right? – alireza Mar 01 '22 at 05:55
can you explain it or give an article about it? thank you in advance. – alireza Mar 01 '22 at 06:04
1

https://developer.mozilla.org/en-US/docs/web/api/element/setattribute Although I just realized that there is a https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute as well. It's been a while since I've done vanilla JavaScript! – Will Mar 01 '22 at 06:34
1

In fact, the docs say: "You should use removeAttribute() instead of setting the attribute value to null either directly or using setAttribute(). Many attributes will not behave as expected if you set them to null." So use `removeAttribute` – Will Mar 01 '22 at 06:36

score 0 · Answer 2 · answered Mar 01 '22 at 05:47

<button class="watch-list-btn" id="watch-list-btn">Watchlist </button>
<button class="watch-list-btn" id="remove-event">Watchlist </button>

now you can write the javascript

let btn = document.getElementById('watch-list-btn');

function clickHandler(){
    console.log('Clicked')
}
btn.addEventListener('click', clickHandler);

// Remove event on button click
let remove = document.getElementById('remove-event');
remove.addEventListener('click', function(){
    btn.removeEventListener('click', clickHandler);
});

This code will work for you.

the button doesn't exist from start and going to add it with DOM manipulation so btn.addEventlisthener won't work because btn is undefined. — alireza, Mar 01 '22 at 06:00

how to remove an eventlistener when it's directly added on HTML file

2 Answers2