Lære Fjerning av Elementer fra DOM | DOM-Manipulering for Interaktiv Webutvikling

I dette kapittelet ser vi nærmere på hvordan man fjerner elementer fra DOM-en.

Fjerne elementer fra DOM-en

Elementer kan fjernes dynamisk ved hjelp av metoder som removeChild() og remove().

RemoveChild()

Metoden removeChild() fjerner en spesifisert barne-node fra foreldre-noden. Du må ha tilgang til både foreldre- og barne-elementet for å kunne fjerne det.

index.html

index.js

Remove()

Metoden remove() er en mer direkte tilnærming for å fjerne et element uten å måtte eksplisitt få tilgang til foreldreelementet.

index.html

index.js

Praktisk eksempel: Dynamisk oppgaveliste

Bygg en dynamisk oppgaveliste der brukere kan legge til nye oppgaver, sette inn oppgaver på bestemte posisjoner og fjerne oppgaver etter behov.

index.html

index.css

index.js

Oppretting og tilføying av nye oppgaver:

createElement() brukes til å opprette nye <li>-elementer og <button>-elementer dynamisk når brukeren legger inn en ny oppgave;
appendChild() legger til den nylig opprettede oppgaven på slutten av listen, slik at brukeren kan fortsette å legge til oppgaver etter hvert som listen brukes.

Sette inn oppgaver på bestemte posisjoner: "Sett inn oppgave øverst"-knappen bruker insertBefore() for å legge til oppgaver øverst i listen, og viser hvordan elementer kan plasseres på nøyaktige posisjoner i forelderen.

Legge til fjern-funksjonalitet:

Funksjonen addRemoveFunctionality() kobler en hendelseslytter til hver oppgaves fjern-knapp, slik at hver oppgave kan slettes når knappen trykkes;
Denne funksjonen gjenbrukes for både eksisterende og nye oppgaver, slik at oppførselen blir lik for alle oppgaver.

Håndtering av eksisterende elementer: Eksisterende oppgaver får også fjern-funksjonalitet ved at alle nåværende fjern-knapper velges og nødvendige hendelseslyttere kobles til når siden lastes inn.

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 10

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.22

Sveip for å vise menyen

I dette kapittelet ser vi nærmere på hvordan man fjerner elementer fra DOM-en.

Fjerne elementer fra DOM-en

Elementer kan fjernes dynamisk ved hjelp av metoder som removeChild() og remove().

RemoveChild()

Metoden removeChild() fjerner en spesifisert barne-node fra foreldre-noden. Du må ha tilgang til både foreldre- og barne-elementet for å kunne fjerne det.

index.html

index.js

Remove()

Metoden remove() er en mer direkte tilnærming for å fjerne et element uten å måtte eksplisitt få tilgang til foreldreelementet.

index.html

index.js

Praktisk eksempel: Dynamisk oppgaveliste

Bygg en dynamisk oppgaveliste der brukere kan legge til nye oppgaver, sette inn oppgaver på bestemte posisjoner og fjerne oppgaver etter behov.

index.html

index.css

index.js

Oppretting og tilføying av nye oppgaver:

createElement() brukes til å opprette nye <li>-elementer og <button>-elementer dynamisk når brukeren legger inn en ny oppgave;
appendChild() legger til den nylig opprettede oppgaven på slutten av listen, slik at brukeren kan fortsette å legge til oppgaver etter hvert som listen brukes.

Legge til fjern-funksjonalitet:

Funksjonen addRemoveFunctionality() kobler en hendelseslytter til hver oppgaves fjern-knapp, slik at hver oppgave kan slettes når knappen trykkes;
Denne funksjonen gjenbrukes for både eksisterende og nye oppgaver, slik at oppførselen blir lik for alle oppgaver.

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 10