Lære Fjernelse af Elementer fra DOM'en | DOM-Manipulation til Interaktiv Webudvikling

I dette kapitel dykker vi ned i, hvordan man fjerner elementer fra DOM'en.

Fjernelse af elementer fra DOM'en

Elementer kan fjernes dynamisk ved hjælp af metoder som removeChild() og remove().

RemoveChild()

Metoden removeChild() fjerner en angivet undernode fra forældrenoden. Det kræver, at du har adgang til både forælder- og barneelementet, der skal fjernes.

index.html

index.js

Remove()

Metoden remove() er en mere ligetil tilgang til at fjerne et element direkte uden eksplicit at skulle tilgå forældrenoden.

index.html

index.js

Praktisk Eksempel: Dynamisk To-Do Liste Manager

Bygning af en dynamisk to-do liste, hvor brugere kan tilføje nye opgaver, indsætte opgaver på specifikke positioner og fjerne opgaver efter behov.

index.html

index.css

index.js

Oprettelse og Tilføjelse af Nye Opgaver:

createElement() anvendes til dynamisk at oprette nye <li>-elementer og <button>-elementer, når brugeren indtaster en ny opgave;
appendChild() tilføjer den nyoprettede opgave til slutningen af listen, hvilket muliggør kontinuerlig tilføjelse af opgaver, mens brugeren interagerer med listen.

Indsættelse af Opgaver på Specifikke Positioner: "Indsæt opgave øverst"-knappen bruger insertBefore() til at tilføje opgaver øverst på listen, hvilket viser, hvordan elementer kan placeres på præcise positioner inden for forælderen.

Tilføjelse af Fjern-funktionalitet:

Funktionen addRemoveFunctionality() tilføjer en event listener til hver opgaves fjern-knap, så hver opgave kan slettes, når knappen klikkes;
Denne funktion genbruges for både eksisterende og nyoprettede opgaver, hvilket sikrer ensartet funktionalitet på tværs af alle opgaver.

Håndtering af Eksisterende Elementer: Eksisterende opgaver udstyres også med fjern-funktionalitet ved at vælge alle nuværende fjern-knapper og tilføje de nødvendige event listeners, når siden indlæses.

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 10

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 2.22

Stryg for at vise menuen

I dette kapitel dykker vi ned i, hvordan man fjerner elementer fra DOM'en.

Fjernelse af elementer fra DOM'en

Elementer kan fjernes dynamisk ved hjælp af metoder som removeChild() og remove().

RemoveChild()

Metoden removeChild() fjerner en angivet undernode fra forældrenoden. Det kræver, at du har adgang til både forælder- og barneelementet, der skal fjernes.

index.html

index.js

Remove()

Metoden remove() er en mere ligetil tilgang til at fjerne et element direkte uden eksplicit at skulle tilgå forældrenoden.

index.html

index.js

Praktisk Eksempel: Dynamisk To-Do Liste Manager

Bygning af en dynamisk to-do liste, hvor brugere kan tilføje nye opgaver, indsætte opgaver på specifikke positioner og fjerne opgaver efter behov.

index.html

index.css

index.js

Oprettelse og Tilføjelse af Nye Opgaver:

createElement() anvendes til dynamisk at oprette nye <li>-elementer og <button>-elementer, når brugeren indtaster en ny opgave;
appendChild() tilføjer den nyoprettede opgave til slutningen af listen, hvilket muliggør kontinuerlig tilføjelse af opgaver, mens brugeren interagerer med listen.

Tilføjelse af Fjern-funktionalitet:

Funktionen addRemoveFunctionality() tilføjer en event listener til hver opgaves fjern-knap, så hver opgave kan slettes, når knappen klikkes;
Denne funktion genbruges for både eksisterende og nyoprettede opgaver, hvilket sikrer ensartet funktionalitet på tværs af alle opgaver.

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 10