<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代码后,运行时先开始增加没有问题,删除从后删除没问题,但是只要删除中间的任何一个都会把所有增加的元素全部删除,没找到问题出在哪,求指教,谢谢
0 个回复