Sådan fjernes et element med JavaScript

May 24

Sådan fjernes et element med JavaScript


JavaScript-funktioner kan tilføje og fjerne elementer i en webside. HTML elementer inden en webside er organiseret i en "træstruktur", som er tilgængelig for JavaScript-funktioner opererer inden siden. Ved at navigere denne struktur, en JavaScript-funktion er i stand til først at lokalisere et element, derefter fjerne det ved hjælp af en henvisning til sit moderselskab element. Oprettelse JavaScript-funktioner til at fjerne elementer er typisk ikke vanskelig og er en god færdighed at lære så du udvikler web programmering færdigheder.

Instruktioner

1 Opret din webside, der indeholder det element, du vil fjerne. Indtast følgende kode i en ny fil i en teksteditor og gemme det med ".HTML" som forlængelsen fil:

<Html>

<Head>

</ Head>

<Body>

<Div id = "fjerne" onclick = "removeElem (this.id)"> Fjern Me </ div>

</ Body>

</ Html>

Dette er et simpelt eksempel for at demonstrere princippet om at fjerne et HTML-element, så den side er der kun det element, der skal fjernes. Elementet er blevet tildelt en "onclick" funktion, hvilket betyder, at når brugeren klikker på den, vil en JavaScript-funktion kaldes og elementet "id" attribut bestået.

2 Opret din JavaScript-funktion. Indtast et område til kode i afsnittet på din side hoved, mellem åbning og lukning hovedet tags:

<Script type = "text / javascript">

// Funktion kaldet på siden

funktion removeElem (divId) {

// Fjerne elementet her

}

</ Script>

Dette repræsenterer funktionen bliver kaldt på at klikke på siden element. Bemærk, at navnet på den funktion matcher element "onclick" funktion. Parameteren "divId" repræsenterer ID værdi, der sendes, når elementet klikket.

3 Find elementet bliver klikket. Tilføj følgende i din JavaScript-funktion, mellem åbning og lukning funktion parentes:

var childElem = document.getElementById (divId);

Dette bruger den passerede ID værdi at finde elementet i HTML-side. Variablen "childElem" nu holder en pointer til det element, der er blevet klikket på. Du kan derefter bruge denne reference til videre behandling.

4 Find den forælder element i element bliver klikket på. Hvis du vil fjerne et element, skal du anskaffe en reference til dets moderselskab, derefter instruere dette element for at fjerne barnet element, du forsøger at ødelægge. Føj følgende kode til at få en henvisning til den forælder:

var parentElem = childElem.parentNode;

Din kode har nu en henvisning til det element, der skal fjernes, og dets moderselskab element.

5 Fjern element fra din side. Føj følgende kode, der udfører fjernelse operation:

parentElem.removeChild (childElem);

Dette kræver en metode på overordnet element, instruerer den til at fjerne barnet element angives som parameter. Gem din fil og åbne din side i en webbrowser for at teste det. Klik på elementet tekst og du bør se den forsvinde. For at teste det igen, opdatere siden og klik igen.

TIPS

  • JavaScript-funktioner kan få adgang til og fjerne ethvert sideelement.
  • Vær forsigtig, når du fjerner elementer, hvis du ved et uheld refererer til og fjerne den forkerte.

relaterede artikler