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 och dess innehåll helt och hållet ur DOM. Om elementet innehåller andra 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:
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 bättre. Speciellt om du har data eller händelser kopplade till elementet. Kör man remove plockas dessa bort, men detach behålls de. Kodmässigt ser anropet till detach ut precis som när man använder remove. Därför kör vi inget exempel.
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. Om du inte vill det måste du använda detach istället.
Vi kör ett litet enkelt exempel:
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 sak som matchas så kommer denna att ersättas med den parameter som man angivit till replaceWith.
Vi kör ett exempel på detta:
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:
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.