Kevin Powell - Community•12mo ago

How to removeEventListener

Hiya! So I need a function removed upon clicking, I've read the docs and I've tried it several ways, also checked the console to see if I could find something useful, but to no avail Maybe I am just misunderstanding it Anyway, in image you'll see the function I need removed (its the one in dynamicpageload) Here is how the js handling this currently looks like:

function pushNewArticle(element){
    const parent = element.parentElement.parentElement
    const newArticle = {}
    newArticle.articleBrand='default'
    newArticle.articleName= parent.children[0].children[1].value
    newArticle.articleEan= parent.children[1].children[0].children[1].value
    newArticle.articleHope= parent.children[1].children[1].children[1].value
    newArticle.articleExpiryDate = parent.children[1].children[2].children[1].value.split("-").reverse().join("/")
    newArticle.articleAvailability='Beschikbaar'
    articles.push(newArticle)
    showExpireSoonDigit()
    createArticleCard(newArticle, (articles.length-1))
}

getObjectByClass("dialogSave").addEventListener("click", (element) => pushNewArticle(element.target))


getObjectByClass("fa-pen-to-square").addEventListener("click", function(){
/* Ive already tried several methods below for calling onto it */
    getObjectByClass("dialogSave").removeEventListener("click", (element) => pushNewArticle(element.target))
})

function pushNewArticle(element){
    const parent = element.parentElement.parentElement
    const newArticle = {}
    newArticle.articleBrand='default'
    newArticle.articleName= parent.children[0].children[1].value
    newArticle.articleEan= parent.children[1].children[0].children[1].value
    newArticle.articleHope= parent.children[1].children[1].children[1].value
    newArticle.articleExpiryDate = parent.children[1].children[2].children[1].value.split("-").reverse().join("/")
    newArticle.articleAvailability='Beschikbaar'
    articles.push(newArticle)
    showExpireSoonDigit()
    createArticleCard(newArticle, (articles.length-1))
}

getObjectByClass("dialogSave").addEventListener("click", (element) => pushNewArticle(element.target))


getObjectByClass("fa-pen-to-square").addEventListener("click", function(){
/* Ive already tried several methods below for calling onto it */
    getObjectByClass("dialogSave").removeEventListener("click", (element) => pushNewArticle(element.target))
})

This js code is incomplete and I'll eventually make sure that no eventListeners & variables are outside of a function, for now I just want it to work before I wrap them in for example "initPageLoad()" If anyone is confused, basically when it's to add a new object, this "save" button will need to create the object However, the same dialog screen is used to edit existing articles, but it obviously shouldn't create a new object but edit the existing ones, hence it'll need a different function attached, not the pushNewArticle function

3 Replies

BrightieOP•12mo ago

Also dont mind the placing of the functions, I know this function should better fit dialogHandler xd I'll get to that eventually, for now I just want it to work https://brights-store-app-prototype.netlify.app In case you require the page to help out, I've updated the website alright, I solved it! I rewrote it so it is using a data attribute and will call a function based on that attributes value

Karl•12mo ago

Great that you solved it. If you want an event listener removed upon clicking / event, you can add an event listener with the once option. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

MDN Web Docs

EventTarget: addEventListener() method - Web APIs | MDN

The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

BrightieOP•12mo ago

Oh, I see, that does look useful too What would you suggest is the better/faster option? Calling a function based on a data attribute or removing them upon being called and re-adding the correct new function?

Gaming

Programming

How to removeEventListener