JavaScript Academy · Lektion

Fjernelse og erstatning af noder

Fjern og erstat elementer på en sikker måde.

Lektion 4 af 413 trin

Fjernelse og erstatning af noder er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Fjernelse af noder

Ud over at tilføje elementer har du ofte brug for at fjerne eller udskifte dem. Moderne DOM-metoder gør dette kort og letlæseligt.

remove

remove løsner et element direkte fra DOM'en, uden at du behøver en reference til dets overordnede element.

const alert = document.querySelector(".alert");
alert.remove();

removeChild

Den ældre removeChild kaldes på det overordnede element og returnerer den fjernede node, så du kan genbruge den.

const list = document.querySelector("ul");
const removed = list.removeChild(list.firstElementChild);

Fjernelse af flere noder

Hvis du vil fjerne alle underordnede noder, kan du gennemløbe dem, indtil der ikke er flere, eller sætte innerHTML til en tom streng. Den sidste metode er hurtig, men kasserer referencer.

while (list.firstChild) {
  list.removeChild(list.firstChild);
}

replaceWith

replaceWith udskifter et element med én eller flere nye noder eller strenge i ét kald.

const old = document.querySelector(".placeholder");
const fresh = document.createElement("div");
old.replaceWith(fresh);

replaceWith med flere noder

replaceWith accepterer flere argumenter, så du kan erstatte én node med mange.

old.replaceWith(headerEl, bodyEl);

replaceChild

Den klassiske replaceChild(newNode, oldNode) kaldes på det overordnede element. Vær opmærksom på rækkefølgen af argumenterne: den nye node først, den gamle bagefter.

list.replaceChild(newItem, oldItem);

Frakoblede noder bevares

En fjernet node bliver ikke slettet. Hvis du beholder en reference til den, kan du indsætte den igen senere, hvilket er nyttigt til mønstre med visning og skjulning.

const saved = panel;
panel.remove();
// later:
container.append(saved);

replaceChildren

replaceChildren erstatter alle underordnede noder i et element på én gang eller fjerner dem, når metoden kaldes uden argumenter.

list.replaceChildren(itemA, itemB); // set new contents
list.replaceChildren();             // remove everything

Hukommelse og lyttere

Når du fjerner et element, holder dets hændelseslyttere også op med at blive udløst, mens elementet er frakoblet. Hvis du tilføjer det igen, forbliver lyttere, der er knyttet direkte til elementet, aktive.

btn.addEventListener("click", handler);
btn.remove();          // handler will not fire while detached
container.append(btn); // handler works again

Valg af metode

Foretræk remove og replaceWith i ren, moderne kode. Brug removeChild/replaceChild, når du har brug for den returnerede node eller skal understøtte meget gamle miljøer.

Hurtigt tjek

Kontrollér rækkefølgen af argumenterne.

Besvar den i den interaktive lektion

Opsummering

Fjern noder med den moderne remove eller den overordnede elements-baserede removeChild. Udskift dem med replaceWith (moderne og med flere argumenter) eller replaceChild(newNode, oldNode). Brug replaceChildren til at nulstille alle underordnede noder. Frakoblede noder bliver i hukommelsen og kan indsættes igen senere.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Fjernelse og erstatning af noder” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Fjernelse og erstatning af noder”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Fjernelse og erstatning af noder”?

Fjern og erstat elementer på en sikker måde. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Fjernelse og erstatning af noder”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til JavaScript Academy