e.target jego numer w tablicy

Question

Cześć, tworzę sobie liste to do i napotkałem mały problem, ale zacznę od początku.

Tak wygląda kod który dodaje notatkę do listy,

function addItem() {
    if(textInput.value!="")
        {
            var newItem = document.createElement('div'),
                textInputValue = textInput.value;
            newItem.classList.add('list-item');
            newItem.innerHTML = textInputValue + "<button id='deleteItem'>✘</button>"; 
            list.appendChild(newItem);
            tableList.push(newItem + textInputValue);
            console.log(tableList);
        }
    else
        {
            alert('Wpisz coś');
        }
};

Jak widać pushuje do tablicy treść, chcę później tą tablię przeparsować i wstawić do LocalStorage, ale zanim to zrobię chcę aby po kliknięciu przycisku remove element się usunął i tak też zrobiłem 

function deleteItemFromList() {
      document.addEventListener('click', function(e){
        if(e.target.id === 'deleteItem')
            {
                e.target.parentElement.remove();
            }
      });
};

Ale chcę też pobrać jego numer w tablicy i też z tablicy go usunąć ale nie wiem jak to zrobić, prówoałem indexOf ale coś nie wychodzi, ktoś pomoże?

Answer 1

tableList.push(newItem + textInputValue);

To raczej nie zadziała.

Czemu tworzysz buttony o tym samym ID? ID ma być unikalne.

Do tworzonej notatki dodawaj unikalne ID, przy usuwaniu pobierasz ID rodzica przycisku(czyli notatki), wyszukujesz w tablicy elementu z takim ID i go usuwasz.

 

Comments

Bo nie miałem pomysłu jak to inaczej zrobić z tymi buttonami :D

---

ale jak mam po id wyszukać element w tablicy, zrobiłem coś takiego, ale zaciąłem się 

"wyszukujesz w tablicy elementu z takim ID i go usuwasz." nie wiem jak to

function addItem() {
    if(textInput.value!="")
        {
            var newItem = document.createElement('div'),
                textInputValue = textInput.value;
            newItem.classList.add('list-item');
            newItem.setAttribute('id', textInputValue.replace(/ /g,''));
            newItem.innerHTML = textInputValue + "<button id='deleteItem'>✘</button>"; 
            list.appendChild(newItem);
            tableList.push(textInputValue.replace(/ /g,''));
            console.log(tableList);
            textInput.value = "";
        }
    else
        {
            alert('Wpisz coś');
        }
};

function deleteItemFromList() {
      document.addEventListener('click', function(e){
        if(e.target.id === 'deleteItem')
            {
                var thisID = e.target.parentElement.getAttribute('id');
            }
      });
};

ID jest ustawianie takie jak treść notatki, ale bez spacji

---

Nadal nie poprawiłeś przycisków w notatce, wszystkie będą mieć identyczne ID.

Jeżeli dodasz dwie, nowe notatki z treścią 'arbuz' to dostaniesz dwa elementy o tym samym ID, a chyba tego nie chcemy.

Teraz do tableList pushujesz stringa, więc jaki element z tej tablicy chcesz usunąć?

Jakiś prosty przykład: https://jsfiddle.net/77db9sep/ - przy usuwaniu stringa z tablicy można zrobić podobnie.

---

Przycisków jeszcze nie poprawiłem ale zrobiłem tak https://wojtekhorembala.github.io/