HTML DOM增加删删除操作

/**

* 思路：

* 1、获取对象

* 2、添加事件

* 添加：

* 3、创建ul标签

* 4、判断inputTxt的值是否为空，为空的话弹出提示，有值的话继续执行添加

* 5、创建li标签，创建文本节点；

* 6、把创建的文本节点，放入li里，把创建li标签放入ul标签里；

* 7、把创建ul标签放入id为box的div里

* 点击删除

* 1、获取box里的所有的li，

* 循环遍历li，

* 判断li的的文本值是否是删除，

* 是的话添加点击事件

*/

//获取对象id

varinputTxt=document.getElementsByTagName("input");

varbox=document.getElementById("box");

varapp=document.getElementById("app");

vardelF=document.getElementById("delF");

vardelL=document.getElementById("delL");

varupdate=document.getElementById("update");

//添加事件

app.onclick=function() {

//创建ul标签

varlist =document.createElement('ul');

//判断inputTxt的值是否为空，为空的话弹出提示，有值的话继续执行添加

if(inputTxt[0].value==''|| inputTxt[1].value==''|| inputTxt[2].value==''){

alert('请输入有效元素');

}else{

//循环input标签

for(vari =0;i < inputTxt.length;i++) {

//创建li标签

varlist_lis =document.createElement('li');

//创建文本节点，

varlist_txt =document.createTextNode(inputTxt[i].value);

//把创建的文本节点，放入li里

list_lis.appendChild(list_txt);

//把创建li标签放入ul标签里

list.appendChild(list_lis);

// 把创建ul标签放入id为box的div里

box.appendChild(list);

//                  console.log(inputTxt[i].value)

}

}

//点击删除

//获取box里的所有的li

varLi=box.getElementsByTagName('li');

//循环遍历li

for(vari=0;i

//判断li的的文本值是否是删除

if(Li[i].innerText=='删除'){

//是的话添加点击事件

Li[i].onclick=function() {

box.removeChild(this.parentNode);

}

}