JavaScript添加一个文本框并带有删除按钮
JavaScript添加一个文本框并带有删除按钮属于前端实例代码，有关更多实例代码大家可以查看。
实际操作中可能需要动态的创建和删除一个元素，比较常见是添加一个文本框和一个删除按钮，点击删除按钮可以删除相应的文本框，下面就结合一个实例详细介绍一下如何实现此效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>添加和删除文本框-前端教程网</title>
<style type="text/css">
ul{
list-style:none
}
</style>
<script type="text/javascript">
window.onload=function(){
var main=document.getElementById("main");
var bt=document.getElementById("bt");
bt.onclick=function(){
var len=main.getElementsByTagName("li").length;
var oul=main.getElementsByTagName("ul")[0];
var oli=document.createElement("li");
var input=document.createElement("input");
var button=document.createElement("input");
input.id="id"+len;
input.type="text";
button.type="button";
button.id="bt"+len;
button.value="点击删除";
oli.appendChild(input);
oli.appendChild(button);
oul.appendChild(oli);
button.onclick=function(){
button.parentNode.remove(button.parentNode);
}
}
}
</script>
</head>
<body>
<input type="button" value="点击添加一项" id="bt" />
<div id="main">
<ul>
<li><input type="text"></li>
</ul>
</div>
</body>
</html>
一.代码注释:
（1）.window.onload=function(){}，文档加载完毕再去执行函数中的代码。
（2）.var main=document.getElementById("main")，获取id属性值为main的元素。
（3）.var bt=document.getElementById("bt")，获取id属性值为bt的元素。
（4）.bt.onclick=function(){}，为bt绑定事件处理函数。
（5）.var len=main.getElementsByTagName("li").length，获取main下面li元素的数目。
（6）.var oul=main.getElementsByTagName("ul")[0]，获取main下面的第一个ul元素。
（7）.var oli=document.createElement("li")，创建一个li元素。
（8）.var input=document.createElement("input"),创建一个input元素。
（9）.input.id="id"+len，设置input对象的id属性值，不设置这里也么什么影响。
（10）.input.type="text"，将input的type属性设置为text，也就是文本框。
（11）.button.type="button"，将一个创建的input元素的type属性值设置为button，即创建一个按钮。
（12）.button.id="bt"+len，设置id属性值，不设置也没关系。
（13）.button.value="点击删除"，设置按钮的value属性值。
（14）.oli.appendChild(input)，为li元素添加文本框。
（15）.oli.appendChild(button)，为li元素添加按钮。
（16）.oul.appendChild(oli)，为ul元素添加li。
（17）.button.onclick=function(){}，为当前创建的删除按钮绑定事件处理函数。
（18）.button.parentNode.remove(button.parentNode)，删除当前按钮所在的li元素。
二.相关阅读：
（1）.window.onload参阅window.onload 事件一章节。
（2）.document.getElementById参阅document.getElementById()一章节。
（3）.getElementsByTagName参阅JavaScript getElementsByTagName()一章节。
（4）.document.createElement参阅document.createElement()一章节。
（5）.appendChild参阅JavaScript appendChild()一章节。
（6）.parentNode参阅JavaScript parentNode 属性一章节。
JavaScript添加一个文本框并带有删除按钮，这样的场景在实际项目中还是用的比较多的，关于JavaScript添加一个文本框并带有删除按钮就介绍到这了。