Jak pobrac id dynamicznie pobranego elementu w czystym JS?

pytanie zadane 30 grudnia 2018 w JavaScript przez bartello88 Użytkownik (670 p.)

Stworzyłem prosta todolist którą tworzy dynamicznie nowe elementy. Chciałbym je tez dynamicznie usuwać, ale nie ostatni(lastChild), a konkretnie kliknięty. Do tego potrzebuje pobrać ID klikniętego elementu. Umiem zrobić to w przypadku elementów już będących wcześniej na stronie, a nie tych które zostaną stworzone. Kod nie działa. Poproszę o pomoc.

2 odpowiedzi

odpowiedź 30 grudnia 2018 przez sebeks Mądrala (5,300 p.)

Zakładasz na listę addEventListener('click', function(e){ },false); i to "e" podane jako argument funkcji to jest event, czyli jeśli klikniesz na na coś co ma na tej liście parametr id, to w tej funkcji możesz mieć np const zmienna = e.target.id i wtedy zmienna będzie stringiem o treści równej id tego elementu. Często używa się też e.target.value.

Najlepiej wewnątrz tej funkcji wpisz sobie console.log(e) i zobacz co zawiera ten obiekt "e", bo są tam inne fajne dane które mogą się przydać jak na przykład pozycja x,y kliknięcia na ekranie i wiele innych.

komentarz 30 grudnia 2018 przez bartello88 Użytkownik (670 p.)

function addElement(){
var newEl = document.createElement("li");
var tekst = "sfsdfs".toUpperCase();
newEl.innerHTML = '<li class="elementyListy" id="elementNumber'+elementumber+'"><p>'+tekst+'</p></li>';
var parent = document.querySelector(".lista").appendChild(newEl);
elementumber++;
}

var el = document.querySelector(".lista");
el.addEventListener("click", function(e){
var targett = e.target;
console.log(targett.id);
}, false);

Własnie coś podobnego zrobiłem ale działa tylko na elementach już wczytanych przez stronę mimo ze w stworzonych dynamicznie sa tez id.

Efekt końcowy powyżej.

komentarz 30 grudnia 2018 przez sebeks Mądrala (5,300 p.)
edycja 3 stycznia 2019 przez sebeks

Dawno takiego kodu nie pisałem. Po pierwsze dane, czyli elementy z listy trzymaj w zmiennej typu tablica. Po drugie wyświetlaj elementy listy iterując po tablicy. Po trzecie dodawaj (i usuwaj) elementy listy w ten sposób, że wykonuj operację na tablicy. Po czwarte, sama zmiana w tablicy nie zmieni widoku na stronie i trzeba uruchomić funkcję wyświetlającą listę po każdej zmianie danych w tablicy (czyli po dodaniu lub usunięciu listy).

Co do kodu to poczytaj gdzieś (np. Dokumentacja MDN) lub obejrzyj na Youtube (np. Samuraj programowania) i zamiast var używaj let i const.