• 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 PRO i VPS, Openstack, VMWare, MS Hyper-V
+1 głos
136 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 (227,970 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,310 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,310 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,310 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 (229,580 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 (191,540 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 (229,580 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 (227,970 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 (191,540 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 (227,970 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,110 wizyt
pytanie zadane 30 lipca 2018 w Systemy operacyjne, programy przez Nimplex Początkujący (460 p.)
0 głosów
1 odpowiedź 155 wizyt
pytanie zadane 27 lipca 2017 w JavaScript przez SzymonSmith Użytkownik (870 p.)
+2 głosów
2 odpowiedzi 160 wizyt
pytanie zadane 26 stycznia 2021 w JavaScript przez Igor Ryp Nowicjusz (140 p.)

90,900 zapytań

139,572 odpowiedzi

313,905 komentarzy

60,373 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...