Dynamiczny element z własnym przyciskiem usuwania
Treść zadania
W formularzu mamy pole <input type="text" id="nazwaRzeczy" value="Parasol">, przycisk <button id="btnDodajRzecz">Dodaj</button> oraz listę <ul id="listaRzeczy"></ul>.
Po kliknięciu przycisku dodaj element o strukturze:
1. Tworzysz <li> i wstawiasz do niego tekst z pola.
2. Tworzysz wewnątrz niego <button class="btn-kasuj">Usuń</button>.
3. Dodajesz do przycisku zdarzenie kliknięcia, które usuwa cały nadrzędny element li.remove().
4. Dołączasz przycisk do li, a li do listy #listaRzeczy.
Co będzie oceniane
- Utworzenie znacznika li oraz zagnieżdżonego button z klasą btn-kasuj.
- Podpięcie obsługi usuwania li pod przycisk kasowania.
- Wstawienie struktury do #listaRzeczy i przetestowanie usuwania.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (2)
- Dodanie pozycji wraz z przyciskiem kasowania — licznik #listaRzeczy li = 1; licznik #listaRzeczy button.btn-kasuj = 1
- Kliknięcie przycisku Usuń kasuje dodany wiersz — licznik #listaRzeczy li = 0
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Twórz elementy li z własnym przyciskiem usuwającym po kliknięciu #btnDodajRzecz
Wskazówki
Wskazówka 1
Możesz zagnieżdżać nowo tworzone elementy w sobie przed dołączeniem ich do głównego drzewa dokumentu.
Wskazówka 2
Utwórz element listy i przycisk, dodaj do przycisku obsługę kliknięcia usuwającą utworzony element listy, połącz przycisk z elementem listy za pomocą appendChild i na końcu dołącz całość do listy nadrzędnej.