JavaScript problem z aplikajcą! Proszę o Pomoc!

Question

   <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!

 

Comments

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;
        } 
    }
});

 

---

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 :)

Answer 1

<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>

 

Comments

HAHAHAH  Dziękuje i Przepraszam! oczy nie te

---

@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' :)

---

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ć...

---

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. ;) 

---

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 :)

Answer 2

[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;
        } 
    }
});

 

Comments

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

---

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.

---

@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). 

---

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