jquery动态添加删除input输入框 - 烟雨观春柳

时间：2024-03-09 12:44:47

jquery动态添加删除input输入框 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<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>

以上代码实现了我们的需求，可以点击动态生成和删除文本框，下面就介绍一下实现过程。
一.实现原理:
为添加按钮注册事件处理函数，点击的时候将动态的创建文本框和删除按钮，然后为创建的删除按钮注册事件处理函数，点击的时候就会删除当前按钮所在的li元素，就这么简单。
二.代码注释:
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元素。

相关文章