Home > Developer > JavaScript
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Web Effects Add text input box with delete button code </title>
<body>
<div id= "D" >
<input type= "Text"/>
</div>
<input type= "button" id= "B" value= "Add"/>
</body>
<script language= "JavaScript" >
document.getElementById ("B"). Onclick=function () {
document.getElementById ("D"). innerhtml+= ' <br><input type= ' text '/> ';
}
</script>Method two with Delete button
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<body>
<div id= "D" >
<input type= "text" name= "Text_0"/>
</div>
<input type= "button" id= "B" value= "Add"/>
</body>
<script language= "JavaScript" >
i = 1;
document.getElementById ("B"). Onclick=function () {
document.getElementById ("D"). innerhtml+= ' <div id= "div_ ' +i+ '" ><input name= "text" name= "Text_ ' +i+ '" type= " Text "/><input type=" button "value=" delete "onclick=" del (' +i+ ') "/></div>";
i = i + 1;
}
Function del (o) {
document.getElementById ("D"). RemoveChild (document.getElementById ("Div_" +o));
}
</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
