## Uppgift
Du bygger en dynamisk lista där användare kan lägga till och ta bort specifika objekt.
1. Använd **händelsedelegering** genom att lägga till en enda klickhändelselyssnare på `ul` med ID `dynamic-list`;
2. När ett objekt klickas på:
   - Om det klickade elementet är en `<li>`, visa en alert med texten för det klickade objektet;
   - Om det klickade elementet är en "Delete"-knapp, ta bort motsvarande `<li>`-objekt från listan.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHVsIGlkPSJkeW5hbWljLWxpc3QiPgogICAgICA8bGk+SXRlbSAxIDxidXR0b24gY2xhc3M9ImRlbGV0ZS1idG4iPkRlbGV0ZTwvYnV0dG9uPjwvbGk+CiAgICAgIDxsaT5JdGVtIDIgPGJ1dHRvbiBjbGFzcz0iZGVsZXRlLWJ0biI+RGVsZXRlPC9idXR0b24+PC9saT4KICAgIDwvdWw+CiAgICA8YnV0dG9uIGlkPSJhZGQtaXRlbSI+QWRkIEl0ZW08L2J1dHRvbj4KICAgIDxzY3JpcHQgc3JjPSJpbmRleC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdBcmlhbCcsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjRmODsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBtYXJnaW46IDA7CiAgY29sb3I6ICMzMzM7Cn0KCnVsIHsKICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7CiAgcGFkZGluZzogMDsKICBtYXJnaW46IDIwcHggMDsKICB3aWR0aDogMzAwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgYm94LXNoYWRvdzogMCA1cHggMTVweCByZ2JhKDAsIDAsIDAsIDAuMSk7Cn0KCiNkeW5hbWljLWxpc3QgbGkgewogIHBhZGRpbmc6IDEycHg7CiAgbWFyZ2luOiA4cHggMDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjlmYWZiOwogIGJvcmRlci1yYWRpdXM6IDZweDsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwogIGNvbG9yOiAjMWYyOTM3Owp9CgojZHluYW1pYy1saXN0IGxpOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZTVlZmZmOwp9CgojZHluYW1pYy1saXN0IGJ1dHRvbiB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2VmNDQ0NDsKICBjb2xvcjogI2ZmZmZmZjsKICBib3JkZXI6IG5vbmU7CiAgcGFkZGluZzogNnB4IDEycHg7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIGZvbnQtc2l6ZTogMC45cmVtOwogIGN1cnNvcjogcG9pbnRlcjsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTsKfQoKI2R5bmFtaWMtbGlzdCBidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICNkYzI2MjY7Cn0KCiNhZGQtaXRlbSB7CiAgcGFkZGluZzogMTBweCAxNXB4OwogIGZvbnQtc2l6ZTogMXJlbTsKICBjb2xvcjogI2ZmZmZmZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjM2I4MmY2OwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwp9CgojYWRkLWl0ZW06aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMyNTYzZWI7Cn0=

Y29uc3QgZHluYW1pY0xpc3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZHluYW1pYy1saXN0Jyk7CmNvbnN0IGFkZEl0ZW1CdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYWRkLWl0ZW0nKTsKbGV0IGl0ZW1Db3VudCA9IDI7CgphZGRJdGVtQnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gewogIGl0ZW1Db3VudCsrOwogIGNvbnN0IG5ld0l0ZW0gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdsaScpOwogIG5ld0l0ZW0udGV4dENvbnRlbnQgPSBgSXRlbSAke2l0ZW1Db3VudH0gYDsKCiAgY29uc3QgZGVsZXRlQnV0dG9uID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnYnV0dG9uJyk7CiAgZGVsZXRlQnV0dG9uLnRleHRDb250ZW50ID0gJ0RlbGV0ZSc7CiAgZGVsZXRlQnV0dG9uLmNsYXNzTGlzdC5hZGQoJ2RlbGV0ZS1idG4nKTsKCiAgbmV3SXRlbS5hcHBlbmRDaGlsZChkZWxldGVCdXR0b24pOwogIGR5bmFtaWNMaXN0LmFwcGVuZENoaWxkKG5ld0l0ZW0pOwp9KTsKCi8vIEV2ZW50IGRlbGVnYXRpb24gdG8gaGFuZGxlIGl0ZW0gYW5kIGRlbGV0ZSBidXR0b24gY2xpY2tzCl9fX19fLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZXZlbnQgPT4gewogIGlmIChfX19fXykgewogICAgYWxlcnQoYFlvdSBjbGlja2VkIG9uOiAke2V2ZW50LnRhcmdldC5maXJzdENoaWxkLnRleHRDb250ZW50fWApOwogIH0KCiAgaWYgKGV2ZW50LnRhcmdldC5jbGFzc0xpc3QuY29udGFpbnMoJ2RlbGV0ZS1idG4nKSkgewogICAgY29uc3QgbGlzdEl0ZW0gPSBldmVudC50YXJnZXQucGFyZW50Tm9kZTsKICAgIGR5bmFtaWNMaXN0LnJlbW92ZUNoaWxkKGxpc3RJdGVtKTsKICB9Cn0pOw==

- Använd `event.target.tagName === 'LI'` för att kontrollera om det klickade elementet är en `<li>`;
- Använd `event.target.classList.contains('delete-btn')` för att kontrollera om det klickade elementet är en "Delete"-knapp.

Y29uc3QgZHluYW1pY0xpc3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZHluYW1pYy1saXN0Jyk7CmNvbnN0IGFkZEl0ZW1CdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYWRkLWl0ZW0nKTsKbGV0IGl0ZW1Db3VudCA9IDI7CgovLyBBZGQgbmV3IGl0ZW1zIHRvIHRoZSBsaXN0CmFkZEl0ZW1CdXR0b24uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoKSA9PiB7CiAgaXRlbUNvdW50Kys7CiAgY29uc3QgbmV3SXRlbSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2xpJyk7CiAgbmV3SXRlbS50ZXh0Q29udGVudCA9IGBJdGVtICR7aXRlbUNvdW50fSBgOwoKICBjb25zdCBkZWxldGVCdXR0b24gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdidXR0b24nKTsKICBkZWxldGVCdXR0b24udGV4dENvbnRlbnQgPSAnRGVsZXRlJzsKICBkZWxldGVCdXR0b24uY2xhc3NMaXN0LmFkZCgnZGVsZXRlLWJ0bicpOwoKICBuZXdJdGVtLmFwcGVuZENoaWxkKGRlbGV0ZUJ1dHRvbik7CiAgZHluYW1pY0xpc3QuYXBwZW5kQ2hpbGQobmV3SXRlbSk7Cn0pOwoKLy8gRXZlbnQgZGVsZWdhdGlvbiB0byBoYW5kbGUgaXRlbSBhbmQgZGVsZXRlIGJ1dHRvbiBjbGlja3MKZHluYW1pY0xpc3QuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBldmVudCA9PiB7CiAgaWYgKGV2ZW50LnRhcmdldC50YWdOYW1lID09PSAnTEknKSB7CiAgICBhbGVydChgWW91IGNsaWNrZWQgb246ICR7ZXZlbnQudGFyZ2V0LmZpcnN0Q2hpbGQudGV4dENvbnRlbnR9YCk7CiAgfQoKICBpZiAoZXZlbnQudGFyZ2V0LmNsYXNzTGlzdC5jb250YWlucygnZGVsZXRlLWJ0bicpKSB7CiAgICBjb25zdCBsaXN0SXRlbSA9IGV2ZW50LnRhcmdldC5wYXJlbnROb2RlOwogICAgZHluYW1pY0xpc3QucmVtb3ZlQ2hpbGQobGlzdEl0ZW0pOwogIH0KfSk7

Behärska grundläggande JavaScript-koncept, inklusive klasser, DOM-manipulation, händelsehantering och asynkron programmering. Lär dig skapa dynamiska och interaktiva webbapplikationer genom att hantera användarinteraktioner, hämta och visa data samt effektivt hantera asynkrona operationer. Genom en kombination av teori, praktiska utmaningar och verkliga exempel ger denna kurs dig de praktiska färdigheter som krävs för modern webbutveckling.

Lär dig grunderna i JavaScript-klasser, från klassdeklarationer till att definiera metoder som förbättrar funktionaliteten. Upptäck hur du använder parameterobjekt effektivt, hanterar privata egenskaper och kontrollerar åtkomst med getters och setters. Behärska statiska egenskaper och statiska metoder samt utnyttja kraften i klassarv med "extends" och "super()" för att skapa skalbar och återanvändbar kod.

Behärska DOM-manipulation för att skapa dynamiska, interaktiva webbapplikationer. Navigera och modifiera DOM-strukturen, uppdatera innehåll dynamiskt och tillämpa bästa praxis för säkerhet och prestanda. Skilj mellan egenskaper och attribut för att optimera din kod.

Lås upp interaktiviteten i dina webbapplikationer genom att bemästra JavaScript-händelser. Förstå händelsepropagering, kontrollera händelsebeteende och implementera effektiv händelsehantering för användarinteraktioner. Optimera prestanda med avancerade tekniker som händelsedelegering.

Fördjupa dig i asynkron JavaScript, inklusive återanrop, löften och async/await. Lär dig att hämta data från API:er, integrera tredjepartsbibliotek och hantera flera förfrågningar effektivt, vilket bygger färdigheter för att skapa datadrivna applikationer.

Utmaning: Hantera Händelsepropagering och Delegering

Uppgift

Awesome!

Utmaning: Hantera Händelsepropagering och Delegering

Uppgift