Hvordan removeChild Ved hjelp av en strengvariabel

Javascript-funksjoner kan fjerne elementer i et HTML- eller XML-dokument dynamisk. Ved å inkludere Javascript-funksjoner innenfor markering for en webside, kan du endre innholdet på siden mens brukeren viser og samspill med det. Javascript-koden fungerer ved først å få en henvisning til overordnede element, deretter instruere nettleseren til å fjerne en av de underordnede elementer med removeChild metoden. Du kan fjerne en bestemt barn element ved å henvise til den i metodekallet. For å identifisere både ordnede og overordnede elementene, kan du bruke tekststrengvariabler som representerer deres ID-attributter.

Bruksanvisning

1 Legg foreldre og barn elementer i dokumentet. Følgende eksempel HTML markup demonstrerer en enkel foreldre og barn trestruktur i en Web-side:
<Div id = "ytre">
ytre
<Div id = "indre">
indre
</ Div>
</ Div>

Dine egne strukturer kan inneholde flere elementer, samt tekst, data og medieinnhold. Det ytre elementet vil fjerne den indre element når Javascript-funksjonen utfører.

2 Legg en inngang element til markup. Din egen funksjon kan utføre på bestemte hendelser, men for demonstrasjon kan du legge til følgende kode hvis du bruker et HTML-dokument:
<Input type = "button" value = "fjerne" onclick = "removeElement ()" />

Dette skaper en basic input knapp element. Knappen er satt til å ringe et bestemt Javascript-funksjonen når brukeren trykker det.

3 Legg Javascript-kode i dokumentet. Følgende eksempelkode demonstrerer en Javascript-delen i HTML hodet element i en Web-side:
<Script type = "text / javascript">
funksjon removeElement () {
// Fjerne barnet element
}
</ Script>

Din egen kode kan være i en egen fil hvis du foretrekker det. Denne funksjonen disposisjon reflekterer den spesifiserte funksjonskall i input element, slik at innholdet i dette utdraget vil utføre når brukeren trykker på knappen.

4 Definer element ID attributter som strengvariabler. Legg til følgende kode i Javascript-funksjonen:
Var parentElement = "ytre";
Var childElement = "indre";

Disse linjene definerer ID attributtverdiene til ordnede og overordnede elementer. Legg til følgende kode, anskaffe en henvisning til hvert element i dokumentet:
Var outElem = document.getElementById (parentElement);
Var inElem = document.getElementById (childElement);

Koden har nå evnen til å referere til hvert element, å utføre forandringer av innholdet.

5 Legg Javascript-kode for å fjerne barnet element. Sett inn følgende kode i Javascript-funksjonen:
outElem.removeChild (inElem);

Dette ber nettleseren for å fjerne den angitte barnet element fra den overordnede. Lagre filen, og åpne den i en nettleser. Klikk på knappen for å teste funksjonen. Du skal se det indre element forsvinne, slik det ytre element.

Hint

• Du kan eventuelt bestå element id-attributt strenger som parametre til funksjonen.
• Javascript kan oppføre seg uforutsigbart i enkelte nettlesere, så sørg for at du teste dine sider grundig.