Slik sletter du et dynamisk tekstboks i JS

JS "appendChild" og "removeChild" metoder gi utviklere muligheten til å gjøre ting magisk vises og forsvinne på websider. Dynamisk genererte tekstbokser, for eksempel, er nyttig når du trenger dem, men de kan rote en side når du ikke gjør det. Ved å lære å bruke Javascript er "appendChild" metoden, kan du slette dynamiske tekstbokser umiddelbart ved å legge til noen få linjer med Javascript for å din web-applikasjon.

Bruksanvisning

1 Start en HTML-editor og lim inn følgende kode inn i kroppen i en av HTML-dokumenter:

<Div id = "div1"> </ div>

<Input id = "Button1" type = "button" value = "Opprett Tex TBox" onclick = "return createTextbox ( 'ID1', 'name1', 'div1')" />

<Input id = "Button2" type = "button" value = "Slett tekst boksen" onclick = "return deleteTextbox ( 'ID1', 'div1')" />

Den første linjen skaper en div container. Denne beholderen vil holde en dynamisk opprettet tekstboks. Den neste linjen oppretter en knapp som passerer tre parametere til en Javascript-funksjonen når du klikker. De to neste uttalelser lage knapper som kaller "createTextbox" og "deleteTextbox" metoder. Den første knappen klikk passerer id og navn på tekstboksen du ønsker å opprette. Den passerer også den id verdien av div. Den andre knappen, som kaller "deleteTextbox" metoden passerer id av tekstboksen du vil slette og id av sin inneholder div.

2 Tilsett "createTextbox" -funksjonen til dokumentets manuset seksjonen som vist nedenfor:

funksjon createTextbox (id, navn, boxParent) {

Var boxParentObject = document.getElementById (boxParent);

Var newBox = document.createElement ( "input");

tekstboks = newBox;

newBox.setAttribute ( "id", id);

newBox.setAttribute ( "type", "text");

newBox.setAttribute ( "navn", navn);

newBox.setAttribute ( "id", id);

boxParentObject.appendChild (newBox);

}

Denne funksjonen bruker "createElement" metode for å lage en ny inngangskontroll. Den "setAttribute" metoden definerer at kontrollens type, navn og id. Den endelige uttalelsen føyer den nye tekstboksen til div element gått som et argument til funksjonen.

3 Lim inn følgende "DeleteTextbox" -funksjonen under koden beskrevet i forrige trinn:

funksjon deleteTextbox (id, boxParent) {

Var boxParentObject = document.getElementById (boxParent);

Var tekstboks = document.getElementById (id);

boxParentObject.removeChild (tekstboks);

}

Denne funksjonen sletter den dynamiske tekstboksen på "createTextbox" metoden opprettet. Den første linjen med kode henter en henvisning til div. De neste to linjer med kode slette tekstboksen ved å kalle "removeChild" metoden.

4 Lagre dokumentet og vise den i en nettleser. Klikk på "Create Tekstboks'" -knappen. En tekstboks vises på siden.

5 Klikk på "Slett tekst boksen" -knappen. Javascript-koden kjøres og sletter tekstboksen.