Lära Ta Bort Element Från DOM:en | DOM-manipulation för Interaktiv Webbapplikationsutveckling

I det här kapitlet fördjupar vi oss i hur man tar bort element från DOM:en.

Ta bort element från DOM:en

Element kan tas bort dynamiskt med metoder som removeChild() och remove().

RemoveChild()

Metoden removeChild() tar bort en angiven child-nod från parent-noden. Det kräver att du har tillgång till både parent och child som ska tas bort.

index.html

index.js

Remove()

Metoden remove() är ett mer direkt tillvägagångssätt för att ta bort ett element utan att uttryckligen behöva komma åt föräldranoden.

index.html

index.js

Praktiskt exempel: Dynamisk att-göra-lista

Skapa en dynamisk att-göra-lista där användare kan lägga till nya uppgifter, infoga uppgifter på specifika positioner och ta bort uppgifter vid behov.

index.html

index.css

index.js

Skapa och lägga till nya uppgifter:

createElement() används för att dynamiskt skapa nya <li>-objekt och <button>-element när användaren matar in en ny uppgift;
appendChild() lägger till den nyskapade uppgiften i slutet av listan, vilket möjliggör kontinuerlig tilläggning av uppgifter när användaren interagerar med listan.

Infoga uppgifter på specifika positioner: Knappen "Infoga uppgift överst" använder insertBefore() för att lägga till uppgifter överst i listan, vilket visar hur element kan placeras på exakta positioner inom föräldern.

Lägga till borttagningsfunktionalitet:

Funktionen addRemoveFunctionality() kopplar en händelselyssnare till varje uppgifts borttagningsknapp, vilket gör det möjligt att ta bort varje uppgift när knappen klickas;
Denna funktion återanvänds för både befintliga och nyskapade uppgifter, vilket säkerställer konsekvent beteende för alla uppgifter.

Hantering av befintliga element: Befintliga uppgifter får också borttagningsfunktionalitet genom att alla aktuella borttagningsknappar väljs ut och nödvändiga händelselyssnare kopplas när sidan laddas.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 10

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 2.22

Svep för att visa menyn

I det här kapitlet fördjupar vi oss i hur man tar bort element från DOM:en.

Ta bort element från DOM:en

Element kan tas bort dynamiskt med metoder som removeChild() och remove().

RemoveChild()

Metoden removeChild() tar bort en angiven child-nod från parent-noden. Det kräver att du har tillgång till både parent och child som ska tas bort.

index.html

index.js

Remove()

Metoden remove() är ett mer direkt tillvägagångssätt för att ta bort ett element utan att uttryckligen behöva komma åt föräldranoden.

index.html

index.js

Praktiskt exempel: Dynamisk att-göra-lista

Skapa en dynamisk att-göra-lista där användare kan lägga till nya uppgifter, infoga uppgifter på specifika positioner och ta bort uppgifter vid behov.

index.html

index.css

index.js

Skapa och lägga till nya uppgifter:

createElement() används för att dynamiskt skapa nya <li>-objekt och <button>-element när användaren matar in en ny uppgift;
appendChild() lägger till den nyskapade uppgiften i slutet av listan, vilket möjliggör kontinuerlig tilläggning av uppgifter när användaren interagerar med listan.

Lägga till borttagningsfunktionalitet:

Funktionen addRemoveFunctionality() kopplar en händelselyssnare till varje uppgifts borttagningsknapp, vilket gör det möjligt att ta bort varje uppgift när knappen klickas;
Denna funktion återanvänds för både befintliga och nyskapade uppgifter, vilket säkerställer konsekvent beteende för alla uppgifter.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 10