JavaScript添加一个文本框并带有删除按钮属于前端实例代码，有关更多实例代码大家可以查看。

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

代码实例如下:

添加和删除文本框-犀牛前端部落

ul{

list-style:none

}

window.οnlοad=function(){

var main=document.getElementById("main");

var bt=document.getElementById("bt");

bt.οnclick=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.οnclick=function(){

button.parentNode.remove(button.parentNode);

}

}

}

一.代码注释:

(1).window.οnlοad=function(){}，文档加载完毕再去执行函数中的代码。

(2).var main=document.getElementById("main")，获取id属性值为main的元素。

(3).var bt=document.getElementById("bt")，获取id属性值为bt的元素。

(4).bt.οnclick=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.οnclick=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 属性一章节。