aefj
aefj
  • 发布:2016-11-30 14:53
  • 更新:2016-11-30 14:53
  • 阅读:1070

为什么js添加删除不正常

分类:HBuilder
<script type="text/javascript">  
            mui.init()  
            mui.plusReady(function () {  
                var addRongQi= document.getElementById("addRongQi");  
                var id=1;  
                document.getElementById('btnAdd').addEventListener('tap',function () {  
                        //添加自定义容器  
                        var newDiv=document.createElement("div");  
                        newDiv.classList.add("Div");  
                        newDiv.classList.add("mui-input-row");  
                        newDiv.id="customname"+id;  
                        //添加自定义项名称  
                        var newLabel=document.createElement("label");  
                        newLabel.innerText="自定义项";  
                        newLabel.style.width="40%";  
                        newLabel.id="customnameinput"+id;  
                        //添加自定义项输入框  
                        var newInput=document.createElement("input");  
                        newInput.type="text";  
                        newInput.classList.add("mui-input-clear");  
                        newInput.classList.add("mui-input");  
                        newInput.placeholder="请输入自定义项名称";  
                        newInput.style.width="60%";  

                        //将两项添加到容器  
                        newDiv.appendChild(newLabel);  
                        newDiv.appendChild(newInput);  
                        //显示到界面  
                        addRongQi.appendChild(newDiv);  
                        //添加按钮  
                         var newBtn = document.createElement("button");  
                        newBtn.type="button";  
                        newBtn.classList.add("Btn");  
                        newBtn.classList.add("mui-btn");  
                        newBtn.classList.add("mui-btn-blue");  
                        newBtn.innerText="删除";  
                        newBtn.style.marginRight="10px";  
                        newBtn.id="custombtn"+id;  
                        //显示到界面  
                        addRongQi.appendChild(newBtn);  
                        //添加自定义值容器  
                        newDiv=document.createElement("div");  
                        newDiv.classList.add("Div");  
                        newDiv.classList.add("mui-input-row");  
                        newDiv.id="customvalue"+id;  
                        //添加自定义值名称  
                        newLabel=document.createElement("label");  
                        newLabel.innerText="自定义值";  
                        newLabel.style.width="40%";  
                        //添加自定义值内容  
                        newInput=document.createElement("input");  
                        newInput.type="text";  
                        newInput.classList.add("mui-input-clear");  
                        newInput.classList.add("mui-input");  
                        newInput.placeholder="请输入自定义值内容";  
                        newInput.style.width="60%";  
                        //添加到容器  
                        newDiv.appendChild(newLabel);  
                        newDiv.appendChild(newInput);  
                        //显示到界面  
                        addRongQi.appendChild(newDiv);  
                        id++;  
                })  

                mui('#addRongQi').on('tap','.Btn',function(){  
                    console.log(this.innerHTML);  
                    var thid=this.id.toString();  
                    console.log(thid);  
                    thid=thid.substr(thid.length-1);  
                    console.log(thid);  
                    //删除自定义项  

                    var delcustomname= document.getElementById("customname"+thid);  
                    addRongQi.removeChild(delcustomname)  
                    console.log(delcustomname);   
                    //delcustomname.parentNode.removeChild(delcustomname);   
                    //删除自定义值  
                    var delcustomvalue=document.getElementById("customvalue"+thid);  
                    //delcustomvalue.parentNode.removeChild(delcustomvalue);  
                    addRongQi.removeChild(delcustomvalue)  
                    //删除按钮  
                    //this.parentNode.removeChild(this);   
                    addRongQi.removeChild(this);  
                });  
            })  
        </script>

使用如上Js代码后,运行时先开始增加没有问题,删除从后删除没问题,但是只要删除中间的任何一个都会把所有增加的元素全部删除,没找到问题出在哪,求指教,谢谢

2016-11-30 14:53 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复