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

JavaScript problem z aplikajcą! Proszę o Pomoc!

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
269 wizyt
pytanie zadane 11 października 2020 w JavaScript przez niezalogowany
   <button id="add">Dodaj nowy element</button>
    <ul id="list">
        <li>
            Element 1 <button data-delete>Usun</button>
        </li>
    </ul>
const addButton = document.getElementById('add');
const list = document.getElementById('list');
let counter = 1;
addButton.addEventListener('click', () => {
    const li = document.createElement('li');
    li.textContent = `element ${++counter}`;
    const button = document.createElement('button');
    button.textContent = 'Usun';
    button.dataset.action = 'delete';
    li.appendChild(button)
    list.appendChild(li)
});

list.addEventListener('click', e => {
    if (e.target.dataset.action === 'delete') {
        e.target.parentNode.remove();
    }
});


Aplikacja ma dodawać oraz usuwać z Listy, wszystkie elementy ! Włączając w to ELEMENT 1 !!!!

Problem polega na tym że ELEMENT 1  nie można ususnąć!

Dlaczego to nie działa !? Używam VSC, Live Server , Firefox. scrypt js podpięty na koncu body.

Proszę o Pomoc i życzę miłego dnia!

 

komentarz 11 października 2020 przez VBService Ekspert (256,320 p.)
edycja 11 października 2020 przez VBService

Czy zmienna counter nie powinna przy okazji być "ustawiona" na "zero", gdy lista jest pusta?

list.addEventListener('click', e => {
    if (e.target.dataset.action == 'delete') {
        e.target.parentNode.remove(); 
    }
});

list.addEventListener('click', e => {
    if (e.target.dataset.action == 'delete') {
        e.target.parentNode.remove();
        if (list.childElementCount == 0)  {
          counter = 0;
        } 
    }
});

 

komentarz 11 października 2020 przez hoktaur Pasjonat (22,250 p.)
ja bym tam liczył ilość elementów po każdym dodaniu i odejmowaniu pkt albo ...

odejmował counter przy każdym usuwaniu,

ale to już zależy od podejścia i potrzeby do czego kod jest potrzebny i jaką rolę pełni ta zmienna :)

2 odpowiedzi

+3 głosów
odpowiedź 11 października 2020 przez hoktaur Pasjonat (22,250 p.)
wybrane 11 października 2020 przez ScriptyChris
 
Najlepsza
<ul id="list">
     <li>
         Element 1 <button data-delete="">Usun</button>
     </li>
 <li>element 3<button data-action="delete">Usun</button></li></ul>

znajdź różnice :)

poprawnie według twojego pomysłu

<button id="add">Dodaj nowy element</button>
 <ul id="list">
     <li>
         Element 1 <button data-action="delete">Usun</button>
     </li>
 </ul>

 

2
komentarz 11 października 2020 przez niezalogowany

HAHAHAH  Dziękuje i Przepraszam!laugh oczy nie te cool

komentarz 11 października 2020 przez hoktaur Pasjonat (22,250 p.)

@ScriptyChris,

Nie popełnia błędów ten, kto nic nie robi. :P

 nie prawda wszystko zależy od oceniającego, który może zawsze powiedzieć że błędem było 'nic nie robienie' :)

komentarz 11 października 2020 przez Tomek Sochacki Ekspert (227,490 p.)
Heh tak to jest jak się kopiuje kod miedzy codepen j wordem piętnaście razy w te i spowrotem i potem robi zmiany po korektach... dzieki za zlokalizowanie błędu i znalezienie problemu. Szkoda, że książek nie da się tak szybko poprawić...
komentarz 11 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

Szkoda, że książek nie da się tak szybko poprawić...

Można wydać reedycję z poprawkami i dodatkową treścią, na którą zabrakło czasu/pomysłów/motywacji w pierwotnej wersji. ;) 

komentarz 11 października 2020 przez Tomek Sochacki Ekspert (227,490 p.)
Nie chciałbym wchodzić w szczegóły, ale niestety nie zawsze jest to takie proste... tym bardziej gdy już jest wydrukowany duży nakład :)
0 głosów
odpowiedź 11 października 2020 przez VBService Ekspert (256,320 p.)
edycja 11 października 2020 przez VBService

[Edit] Spróbuj tak:

<button id="add">Dodaj nowy element</button>
 <ul id="list"></ul>
const addButton = document.getElementById('add');
const list = document.getElementById('list');
let counter = 0;
addButton.addEventListener('click', () => {
  addLiElement();
});

(addLiElement = () => {
    const li = document.createElement('li');
    li.textContent = `element ${++counter}`;
    const button = document.createElement('button');
    button.textContent = 'Usun';
    button.dataset.action = 'delete';
    li.appendChild(button)
    list.appendChild(li)
}).call(this)

list.addEventListener('click', e => {
    if (e.target.dataset.action == 'delete') {
        e.target.parentNode.remove();
        if (list.childElementCount == 0)  {
          counter = 0;
        } 
    }
});

 

komentarz 11 października 2020 przez niezalogowany

Kreatywnie ale nie możemy zmienić HTML ! Bardzo przepraszam za mój błąd i złe oznaczenie kodu Html w pytaniu ! Pierwszy fragment kodu to HTML, nie jak napisałem javascript! Dziekuję serdecznie z Pomoc i życzę miłego dnia wink

komentarz 11 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

Twój pierwszy button Usuń nie ma dodanego Listener-a

@VBService, to nie ma znaczenia, ponieważ listener jest podpięty na liście (której przycisk Usuń jest potomkiem), a zdarzenia bąbelkują, więc kliknięcie w przycisk powoduje wywołanie listenera na liście.

1
komentarz 11 października 2020 przez VBService Ekspert (256,320 p.)

@ScriptyChris, Przyznaję Tobie rację, rzeczywiście przeoczyłem fakt propagowania zdarzenia i błąd w zapisie kodu,

<button data-delete>

na 

<button data-action="delete">

co i tak nie zmienia faktu, że przedstawiony prze zemnie kod wyeliminował Moje niedopatrzenie (propagacja zdarzenia) i błąd autora książki (treść komentarzy pod najlepszą odpowiedzią - powyżej). wink

2
komentarz 11 października 2020 przez niezalogowany

Proszę Pamiętać że sukces zawsze ma wielu Ojców !

cheeky

Podobne pytania

0 głosów
1 odpowiedź 1,264 wizyt
pytanie zadane 30 lipca 2018 w Systemy operacyjne, programy przez Nimplex Początkujący (460 p.)
0 głosów
1 odpowiedź 452 wizyt
pytanie zadane 27 lipca 2017 w JavaScript przez SzymonSmith Użytkownik (870 p.)
+2 głosów
2 odpowiedzi 224 wizyt
pytanie zadane 26 stycznia 2021 w JavaScript przez Igor Ryp Nowicjusz (140 p.)

93,173 zapytań

142,184 odpowiedzi

321,967 komentarzy

62,499 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 1149p. - dia-Chann
  2. 1131p. - Łukasz Piwowar
  3. 1124p. - CC PL
  4. 1118p. - Łukasz Eckert
  5. 1097p. - Michal Drewniak
  6. 1081p. - Marcin Putra
  7. 1076p. - rucin93
  8. 1054p. - Adrian Wieprzkowicz
  9. 1047p. - Piotr Aleksandrowicz
  10. 1000p. - ssynowiec
  11. 967p. - rafalszastok
  12. 931p. - Michał Telesz
  13. 886p. - Dominik Łempicki (kapitan)
  14. 842p. - Dawid128
  15. 819p. - Mariusz Fornal
Szczegóły i pełne wyniki

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!

...