• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Usuwanie dynamicznie dodawanych elementów listy

Aruba Cloud - Virtual Private Server VPS
0 głosów
944 wizyt
pytanie zadane 22 czerwca 2016 w JavaScript przez xmentor Nałogowiec (49,520 p.)
zamknięte 22 czerwca 2016 przez xmentor

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

komentarz zamknięcia: Otrzymałem odpowiedź

3 odpowiedzi

+2 głosów
odpowiedź 22 czerwca 2016 przez Comandeer Guru (606,550 p.)
wybrane 22 czerwca 2016 przez xmentor
komentarz 22 czerwca 2016 przez xmentor Nałogowiec (49,520 p.)
Dzięki wielkie - tego szukałem :)
+1 głos
odpowiedź 22 czerwca 2016 przez niezalogowany

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.

komentarz 22 czerwca 2016 przez xmentor Nałogowiec (49,520 p.)

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

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

komentarz 22 czerwca 2016 przez niezalogowany
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
komentarz 22 czerwca 2016 przez Comandeer Guru (606,550 p.)

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

Przekombinowane. Event delegation – FTW! 

komentarz 22 czerwca 2016 przez niezalogowany
-KISS

Event delegation, hah sprytne
0 głosów
odpowiedź 22 czerwca 2016 przez Mateusz821 Bywalec (2,940 p.)
t.parentNode.parentNode.removeChild(t.parentNode);

Dwa razy parentNode?

komentarz 22 czerwca 2016 przez xmentor Nałogowiec (49,520 p.)
Tak, zapomniałem na codepenie dodać akapit wewnątrz li.

Podobne pytania

0 głosów
1 odpowiedź 2,165 wizyt
+2 głosów
1 odpowiedź 445 wizyt
pytanie zadane 10 marca 2021 w JavaScript przez Kalindoreks Użytkownik (620 p.)
0 głosów
2 odpowiedzi 258 wizyt
pytanie zadane 19 sierpnia 2019 w JavaScript przez bugs55 Obywatel (1,090 p.)

93,329 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,663 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...