QuerySelecotrAll & click

[techno]

Ciao a tutti
Ho un menu in questo modo:

<a href="#" class="active">...</a>
<a href="#" data-key="2">...</a>
<a href="#" data-key="3">...</a>
<a href="#" data-key="4">...</a>

Ora se clicco su uno di questi link devo togliere l'attributo data-key sul link cliccato e rimette l'attributo sul link con classe active

const lnk = document.querySlectorAll("a[data-key]");
lnk.foreach(item) => {
item.addEventListener("click", (e) => {
const act= document.querySelector("a.active");
act.setAttribute("data-keu","...");
act.clasList.remove("active");

e.traget.removeAttribute("data-key");
e.target.classList.add("active");
 });
e.preventDefault();

});

ora se clicco la prima volta dsu un lin non con classe "active" fa tutto quello che deve fare pero poi se clicco sul link che precedentemente era "active" non fa nulla fin qui tutto normale, volevo chiedere come posso fare che addEventListener funzioni anche sul link che prima era "active" e non aveva l'attributo "data-key"?

[linoma]

..aggiungi una classe che accomuna i diversi links

[techno]

hai ragione che coglions a non averci pensato

[linoma]

..usa quello Che ti pare

[ninja72]

  <div id="mylinks">
        <a href="#" data-pos="1" class="active">1</a>
        <a href="#" data-pos="2" data-key="2">2</a>
        <a href="#" data-pos="3" data-key="3">3</a>
        <a href="#" data-pos="4" data-key="4">4</a>
    </div>


    <script>
        const lnk = document.getElementById('mylinks');

        Array.from(lnk.children).forEach(item => {
            item.addEventListener("click", (e) => {
                e.preventDefault();
                const act = document.querySelector("a.active")
                act.setAttribute("data-key", act.getAttribute('data-pos'))
                act.classList.remove("active")
                e.target.removeAttribute("data-key")
                e.target.classList.add("active")
            })
        })

    </script>