JavaScript - Problem z dodawaniem i usuwaniem elementów w tablicy

Question

Witam
Zmagam się z problemem w mojej aplikacji. Tworze sobie aplikacje rankingową kryptowalut, gdzie dane pobieranie są z API. Wszystko opakowane jest w każdy wiersz i tabelę jak parent. Dodałem dla każdego rowa button, który umożliwi mi dodanie całego wiersza (ponieważ później w innej zakładce wyświetle je w łatwy sposób) do tablicy "ulubione". I tutaj jest problem, dodawanie poprzez przycisk danego wiersza szaleje, czasami dodaje prawidłowy row, a czasami nie, to samo tyczy się usuwania. Jak rozwiązać ten problem? Bardzo mi zależy na dokończeniu aplikacji, a już nie wiem co robić. Proszę o pomoc. Zamieszczam dodatkowe zdjęcia z aplikacji:
 

if (index == arrOne.length - 1){ //sprawdzam czy zakończono render wszystkich elementów z API
                        
                        let items = document.getElementsByClassName('addCoinFavourite'); // porbranie list elementów gdzie znajdują się buttony


                        for(let i = 0; i<items.length; i++){ 
                            items[i].addEventListener('click', function(){ //przypisanie do każdego elementu funkcji click
                                let index = this.parentNode.parentNode.id;
                                if(favouriteCoinList.includes(items[i].parentNode.id))
                                {
                                    $(this).toggleClass("addCoinFavourite-green")
                                    favouriteCoinList.splice(index,1)
                                    console.log(favouriteCoinList)
                                }
                                else{
                                    $(this).toggleClass("addCoinFavourite-green")
                                    console.log(favouriteCoinList.push(this.parentNode.parentNode));
                                    console.log(favouriteCoinList);
                                }
                                console.log(index);
                            });
                        }
                    }

Tak wygląda widok kodu. Po kliknięciu buttona ma dodać row-coin do tablicy gdzie trzymam wszystkie dane.
Tutaj podgląd tej aplikacji. Jak widać, jest zielony przycisk, który pozwoli mi na usuwanie i dodawanie elementów. Oczywiście po kliknięciu buttona zamienia się on w zielony kolor, po drugim kliknięciu na pierwotny.

Comments

Co, jeśli zamiast `items[i].parentNode.id` uzyjesz `event.target.parentNode.id`?

(gdzie `event` jest argumentem callbacka)

---

Dziękuje za odpowiedź :)
Próbowałem target na evencie ale niestety nie działa. Po kliknięciu dodaje do tablicy element ale gdy chce go ponownie nacisnąć aby usunąć, to niestety nie usuwa.

Answer 1

 if(favouriteCoinList.includes(items[i].parentNode.id))

A to nie powinno byc 

if(favouriteCoinList.includes(items[i].id))

?

Troche zgadywanka. Mozesz wrzucic gdzies kod albo podeslac repo ?

Comments

Dziękuje za odzew

Oczywiście :)

https://github.com/Bartyee/BitFace-Cryptocurrency-ranking/blob/master/app/js/script.js

---

Odkomentowałem ten twój kod, zrobilem console log na favouriteCoinList i wszystko dodaje sie tak jak klikam. Gdzie jest problem?

---

Spróbuj dodawać i usuwać inne i tak się bawić tymi przyciskami. Ogólnie już rozwiązałem problem sam dzisiaj:
 

if(renderDom == true){
                let buttonArray = [...document.getElementsByClassName('addCoinFavourite')];
                

                buttonArray.forEach((item) => {
                    item.addEventListener('click',function(){
                        
                        let index = favouriteArray.indexOf(item.parentElement.parentElement)
                        
                        
                        if(favouriteArray.includes(item.parentElement.parentElement)){
                            $(item).toggleClass('addCoinFavourite-green');
                            if(index > -1){
                                favouriteArray.splice(index, 1);
                                console.log(favouriteArray);
                            }
                            

                        }
                        else{
                            console.log('Id dodanego rowa ' + item.parentElement.parentElement.id);
                            favouriteArray.push(item.parentElement.parentElement);
                            $(item).toggleClass('addCoinFavourite-green');
                            console.log(favouriteArray);
                        }

                    })
                })
            }

Ale dziękuje za pomoc :) !

---

Super, to powodzenia. :)

Ładny wygląd tylko popracowałbym nad tym, że raz używasz var, potem let, a np. 

 let buttonArray = [...document.getElementsByClassName('addCoinFavourite')];

mogłoby być(powinno) const.

---

Haha to tylko testowo było ale zdaje sobie z tego sprawę :D Dziękuje jeszcze raz!