js 动态创建多个表单元素，删除创建的表单元素

<html> 
<head> 
<title>动态创建按钮</title> 
<script language="javascript"> 
var a,b,ab,ba,c;
function createInputA(){
a = document.createElement("input");  //使用DOM的创建元素方法
a.type = "button" ;                       //设置元素的类型
a.value = "按钮A";                     //设置元素的值
a.attachEvent("onclick",addInputB);    //为控件添加事件
document.body.appendChild(a);             //添加控件到窗体中
//a = null;              //释放对象
} function createInputB(){
b = document.createElement("input");
b.type="button";
b.value="按钮B";
b.attachEvent("onclick",addInputA);
document.body.appendChild(b); 
//b = null;
} function createInputC(){
c =document.createElement("input");
c.type="button";
c.value="按钮C";
c.attachEvent("onclick",deleteCreate);
document.body.appendChild(c);
c = null;
}
function addInputB(){
ab = document.createElement("input");
ab.type ="button"; 
ab.value= "按钮B";
ab.attachEvent("onclick",addInputA);
document.body.appendChild(ab);  
//ab = a;       
} function addInputA(){
ba = document.createElement("input");
ba.type ="button"; 
ba.value= "按钮A";
ba.attachEvent("onclick",addInputB);
document.body.appendChild(ba); 
//ba =b ;
}
function deleteCreate(){
document.body.removeChild(ab);
document.body.removeChild(ba);
//var items =document.all.tags("input");
//for(var i =0;i<items.length;i++){
//document.body.removeChild(items[i]);
//}
//document.body.removeNode(); 删除body里面所有的元素
}
function addInput(){ 
if(createInputA() || createInputB()){
return true;
}
if(createInputC()){
alert("createC");
return true;
}
return false;
} 
</script> 
</head> 
<body onLoad="addInput();" id="add"> 
</body> 
</html>

解决方案 »

  1.   

    上面的没有达到这种效果
    就是用JS创建ABC 3个按钮 
    A按钮点击时复制B按钮
     B按钮点击时复制A按钮 
    C按钮点击时删除所有A B复制出来的按钮那位有更好的建议请回帖，有奖励！！！！
      

  2.   

    <html>
    <head>
    <script type="text/javascript">
    window.onload = function() {
    var aBtn = document.createElement("input");
    var bBtn = document.createElement("input");
    var cBtn = document.createElement("input");

    aBtn.type = "button";
    aBtn.value = "按钮A";
    aBtn.onclick = copyBtn;

    bBtn.type = "button";
    bBtn.value = "按钮B";
    bBtn.onclick = copyBtn;

    cBtn.type = "button";
    cBtn.value = "按钮C";
    cBtn.onclick = clearCopyBtn;

    document.body.appendChild(aBtn);
    document.body.appendChild(bBtn);
    document.body.appendChild(cBtn);
    };

    function copyBtn() {
    var btn = document.createElement("input");
    btn.type = "button";
    btn.value = this.value;
    btn.isCopy = true;
    btn.onclick = copyBtn;
    document.body.appendChild(btn);
    }

    function clearCopyBtn() {
    var btns = document.getElementsByTagName("input");
    var length = btns.length;
    for (var i = length - 1; i >= 0; i--) {
    if (btns[i].isCopy) {
    document.body.removeChild(btns[i]);
    }
    }
    }
    </script>
    </head>
    <body>

    </body>
    </html>
      

  3.   

    function deleteCreate(){
    //document.body.removeChild(ab);
    //document.body.removeChild(ba);
    var items =document.getElementsByTagName("input");
    alert("length="+items.length);
    for(var i =3;i<items.length;i++){//从第三个开始删除
    document.body.removeChild(items[i]);
    i--;//之所以加上这个，是因为在每操作一次，长度items.length就会减小，所以呢
    }
    //document.body.removeNode(); 删除body里面所有的元素
    }按你上面的修改，不过这种方法，在标签太多的时候，不好
    2楼的方法不错。。