JavaScript添加一个文本框并带有删除按钮

2018-4-3 12:48| 作者: admin| 查看: 1187| 评论: 0|来自: 蚂蚁部落

实际操作中可能需要动态的创建和删除一个元素,比较常见是添加一个文本框和一个删除按钮,点击删除按钮可以删除相应的文本框,下面就结合一个实例详细介绍一下如何实现此效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<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 属性一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部