Usuwanie dynamicznie dodawanych elementów listy

Question

Napisałem króciutki i do bólu prosty kod, dodaje dynamicznie nowy element do listy z zawartością wprowadzoną do inputa, lecz przed tym sprawdza jeszcze czy element z taką zawartością już istnieje. Próbowałem wyskrobać kod, do usuwania klikniętego elementu, lecz stanąłem jedynie na takim kodzie:

var removeEl = document.querySelectorAll(".listItem");
for (var i = 0; i < removeEl.length; i++) {
    removeEl[i].addEventListener("click", function (event) {
        var t = event.target;
        t.parentNode.parentNode.removeChild(t.parentNode);
    }, false);
}

Link:  http://codepen.io/kkondratowicz/pen/MebbgV

Answer 1

Event delegation → http://tutorials.comandeer.pl/js-beauty.html#delegation

Comments

Dzięki wielkie - tego szukałem :)

Answer 2

JS jest synchroniczny, co za tym idzie zmienna removeEl, która w Twoim zamyśle miałaby być tablicą elementów z listy.. jest pusta. Musisz uaktualniać listę za każdym razem gdy dodajesz nowy element / lub dodawać funkcję usuwania elementu od razu przy jego tworzeniu.

Comments

Musisz uaktualniać listę za każdym razem gdy dodajesz nowy element

Okej, mógłbyś podpowiedzieć jak można uaktualnić? :)

---

To, że uaktualnisz, to jeszcze nie koniec. Musisz odpalać ten kawałek kodu, za każdym razem, gdy w liście pojawi się nowy element.  Do tego wypadałoby przypisywać funkcję usuwania tylko do niego. Teraz jak czytam moją propozycję.. to Ci powiem - szkoda zachodu.

Po stworzeniu newElement - dodaj mu addevenetlistener -> click -> this.remove i po sprawie

---

Po stworzeniu newElement - dodaj mu addevenetlistener -> click -> this.remove i po sprawie

Przekombinowane. Event delegation – FTW! 

---

-KISS

Event delegation, hah sprytne

Answer 3

t.parentNode.parentNode.removeChild(t.parentNode);

Dwa razy parentNode?

Comments

Tak, zapomniałem na codepenie dodać akapit wewnątrz li.