JQuery - att ta bort element

Vi nöjer oss förstås inte bara med att kunna lägga till element i DOM. Vi måste ju även kunna ta bort dem som redan finns där. Annars kan vi inte göra webbappliaktioner som är dynamiska. Förutom några olika metoder som är till för att ta bort innehåll, ska vi titta på en metod som kan ersätta element med andra element. Även detta involverar ju att man tar bort det som sedan ersätts av något annat och de passar därför inom ramen för denna aktivitet.

remove

Med remove kan du plocka bort ett element ur DOM. Om elementet innehåller underelement, så tas även dessa bort. Eventuella händelser och data som är kopplade till elementet och dess underelement försvinner även dessa.

Det är enkelt att använda denna metod. Här följer ett exempel:

See the Pen MKmPPq by Patrik Grip-Jansson (@PGJ) on CodePen.

I exemplet söker vi ut alla p-element och tar bort dessa ur DOM.

detach

Om du vet att de element du tar bort ifrån DOM:en kommer att behövas igen, t.ex. för att du ska lägga tillbaka dem med append eller liknande, då kan detach vara ett bra val. Speciellt gäller detta om du har data eller händelser kopplade till elementet. Kör man remove plockas dessa bort, men med detach behålls de.

Kodmässigt ser anropet till detach ut i stort sett som när man använder remove. Den största skillnaden är att man oftast lagrar undan resultatet i en variabel, eftersom man fortfarande vill kunna komma åt elementen senare.

Vi kör ett exempel:

See the Pen bgaGGy by Patrik Grip-Jansson (@PGJ) on CodePen.

I ovanstående exempel plockas p-elementen bort ur DOM. Sedan läggs de tillbaka i den andra section. Detta är alltså precis samma element som plockades bort, inklusive alla deras inställningar och händelsekopplingar. Så vi skapar inte några nya element som är kopior eller så.

empty

Ibland kanske du vill ha kvar ett element, men vill ta bort allt dess innehåll. Där innehåll inkluderar alla eventuella underelement. I sådana fall är empty en passande metod. Liksom remove så försvinner eventuell data och kopplingar till händelser ifrån de underelement som tas bort.

Vi kör ett litet enkelt exempel:

See the Pen LGygaE by Patrik Grip-Jansson (@PGJ) on CodePen.

Exemplets div töms helt och hållet på innehåll. Det vill säga de två p-element som den innhöll togs bort.

replaceWith

Om man vill ersätt alla matchade element med andra element, kan man använda sig av replaceWith. Man gör matchningarna som vanligt och för varje element som matchas så kommer detta att ersättas med den parameter som man angivit till replaceWith.

Vi kör ett exempel på detta:

See the Pen jWmeRx by Patrik Grip-Jansson (@PGJ) on CodePen.

I exemplet så söker vi ut alla p-element och ersätter dessa med andra, nyskapade p-element.

Liksom i fallet med remove så försvinner eventuell data och kopplingar till händelser.

replaceWith med funktion som parameter

Denna bit är lite överkurs, men det kan vara intressant att veta att det går att göra så här.

Det finns en variant av replaceWith där vi inte skickar med en sträng eller ett element som parameter. Istället skickar vi med en funktion. Då kommer replaceWith att köra denna funktion för varje gång den ska göra ett utbyte. Som första inparameter kommer funktionen att få ett indexvärde, som motsvarar vilken ersättning i ordningen som detta avser. Den andra parametern är innehållet i det element som ska ersättas. Det som returneras ifrån funktionen kommer att bli det nya, ersatta innehållet. Man kan då styra lite mer exakt hur man vill att innehållet ska bytas ut.

Ett exempel på detta:

See the Pen qbmJzE by Patrik Grip-Jansson (@PGJ) on CodePen.

I exemplet så väljer vi ut alla p-element. För varje p-element som matchar, kommer replaceWith att köra vår metod; BytUt. I denna metod skapar vi en ny sträng. Denna sträng kommer att skapa ett nytt element vilket ersätter det gamla. Lägg märke till att index räknas upp ifrån 0, precis som ett index i en array. Lägg även märke till att vi bara får innehållet, inte den html-kod som byggde upp elementet. Om det däremot finns underelement, så får vi med dessa.

Faktum är att denna variant som tar en funktion som inparameter även finns för append och prepend. Men som sagt, detta är överkurs och man använder det inte så ofta. Det kan dock vara bra att ha sett detta någon gång, så man förstår vad som händer om man råkar på kod som använder sig av denna variant.

Nästa aktivitet

jQuery - att hantera css-egenskaper