class FileManager{
addResourceRecycleOperation(){
const actualRecyclerButtons = document.querySelectorAll(
".resourcePreviewFrame > ion-icon[name = 'close-outline']"
);
for(let i = 0; i < actualRecyclerButtons.length; i++){
//Aquí se añade el evento oyente
actualRecyclerButtons[i].addEventListener("click", this.confirmDiscardResource);
}
}
confirmDiscardResource(ev){
const value = confirm("¿Realmente deseas quitar este elemento de la lista de carga?");
//Aquí se intenta remover el evento oyente.
if(value) ev.currentTarget.removeEventListener("click", this.confirmDiscardResource);
}
}
The method addResourceRecycleOperation
is run after the files have been added to a queue, simply to add a remove button to them if the user wants to remove them from the queue, where the html element looks like this:
<div class="resourcePreviewFrame">
//Este es el elemento al que se le añade el click
<ion-icon name = "close-outline"></ion-icon>
<img src="images/buttons_images/document-icon.png" alt="">
</div>
I printed to the console this.confirmDiscardResource
inside the method confirmDiscardResource
and the result is undefined
, so I know what's going on... but then how do I retrieve the context to be able to remove this listener event?
Note: I already tried bind, it didn't work.
Any ideas?
You can use arrow functions
() => {}
this type of function was added in ES7 and does not have local binding. Hethis
always refers to the object they are on.