Visa källa för 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.

== <code>remove</code> ==
Med <code>remove</code> 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:
<codepen pen="MKmPPq" tab="js,result" height="300">
</codepen>

I exemplet söker vi ut alla <code>[[p]]</code>-element och tar bort dessa ur DOM.

== <code>detach</code> ==
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 <code>append</code> eller liknande, då kan <code>detach</code> vara ett bra val. Speciellt gäller detta om du har data eller händelser kopplade till elementet. Kör man <code>remove</code> plockas dessa bort, men med <code>detach</code> behålls de.

Kodmässigt ser anropet till <code>detach</code> ut i stort sett som när man använder <code>remove</code>. 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:
<codepen pen="bgaGGy" tab="js,result" height="500">
</codepen>

I ovanstående exempel plockas <code>p</code>-elementen bort ur DOM. Sedan läggs de tillbaka i den andra <code>section</code>. 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å.

== <code>empty</code> ==
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 <code>empty</code> en passande metod. Liksom <code>remove</code> så försvinner eventuell data och kopplingar till händelser ifrån de underelement som tas bort.

Vi kör ett litet enkelt exempel:
<codepen pen="LGygaE" tab="js,result" height="300">
</codepen>

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

==  <code>replaceWith</code> ==
Om man vill ersätt alla matchade element med andra element, kan man använda sig av <code>replaceWith</code>. 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 <code>replaceWith</code>.

Vi kör ett exempel på detta:
<codepen pen="jWmeRx" tab="js,result" height="350">
</codepen>

I exemplet så söker vi ut alla <code>[[p]]</code>-element och ersätter dessa med andra, nyskapade <code>[[p]]</code>-element.

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

==  <code>replaceWith</code> 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 <code>replaceWith</code> där vi inte skickar med en sträng eller ett element som parameter. Istället skickar vi med en funktion. Då kommer <code>replaceWith</code> 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:
<codepen pen="qbmJzE" tab="js,result" height="350">
</codepen>

I exemplet så väljer vi ut alla <code>p</code>-element. För varje <code>p</code>-element som matchar, kommer <code>replaceWith</code> att köra vår metod; <code>BytUt</code>. 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 <code>index</code> räknas upp ifrån <code>0</code>, 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 <code>append</code> och <code>prepend</code>.  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]]

[[Category: jQuery|J9]]
[[Category:JavaScript|J9]]