html ul点击删除,用原生实现点击删除点击的li

简单的实现方式

#button{

display:inline-block;

}

ul{

list-style: none;

}

li{

background-color: red;

display:inline-block;

width:20px;

padding:10px;

margin-left:3px;

color:white;

}

window.onload = function (){

var oBtn1=document.getElementById('leftin');

var oBtn2=document.getElementById('rightin');

var oBtn3=document.getElementById('leftout');

var oBtn4=document.getElementById('rightout');

var oLi= document.getElementsByTagName('li');

//console.log(oBtn1);

var number=[];

var value;

var i=0;

oBtn1.οnclick=function(){

//console.log(document.getElementsByTagName('input')[0].value);

value=document.getElementsByTagName('input')[0].value;

if(!/^[0-9]*$/.test(value))

alert("请输入有效的数字");

else{

number.unshift(value);

//console.log(number);

show();

for (var i = 0; i < oLi.length; i++) {

console.log(oLi[i]);

oLi[i].onclick = function(e) {

oUl.removeChild(e.target);

}

};

value = '';

}

}

oBtn2.οnclick=function(){

value=document.getElementsByTagName('input')[0].value;

if(!/^[0-9]*$/.test(value))

alert("请输入有效的数字");

else{

number.push(value);

show();

for (var i = 0; i < oLi.length; i++) {

console.log(oLi[i]);

oLi[i].onclick = function(e) {

oUl.removeChild(e.target);

}

};

value = '';

}

}

oBtn3.οnclick=function(){

alert(number.shift(number[number.length-1]));

show();

}

oBtn4.οnclick=function(){

alert(number.pop(number[0]));

show();

}

/*var i1='document.getElementById("'+i+'")';

console.log(i1);

i1.οnclick=function(){

var tar=parseInt(i1.getAttribute("id"));

number.splice(tar,1);

show();

console.log(1);

return number;

}*/

var oUl = document.getElementsByTagName('ul')[0];

console.log(oLi.length);

//alert(oLi.length);

/*oLi.onclick = function() {

console.log(1);

}*/

//console.log(oLi[0]);

for (var i = 0; i < oLi.length; i++) {

console.log(oLi[i]);

oLi[i].onclick = function(e) {

oUl.removeChild(e.target);

}

};

function show(){

var content=" ";

for(i=0;i

content+="

"+number[i]+"";

}

result.innerHTML=content;

}

};

左侧入

右侧入

左侧出

右侧出

这种方法原理是用For循环来为li添加点击事件，然后点到它的时候去删除ul的子节点

for (var i = 0; i < oLi.length; i++) {

console.log(oLi[i]);

oLi[i].onclick = function(e) {

oUl.removeChild(e.target);

}

};

这里需要说明一点，为什么不用

oUl.removeChild(oLi[i]);

因为在点击oLi[i]的时候，找不到所以的li节点，而且在这里的我们耶不是想要找所有的li节点，而是想找当前的。

所以，这里可以用

oUl.removeChild(e.target);

或

oUl.removeChild(this);

在这里说一下target

target 事件属性可返回事件的目标节点(触发该事件的节点)，如生成事件的元素、文档或窗口。

然后就是一种高级一点的方法

task18

#button{

display:inline-block;

}

ul{

list-style: none;

}

li{

background-color: red;

display:inline-block;

width:20px;

padding:10px;

margin-left:3px;

color:white;

}

左侧入

右侧入

左侧出

右侧出

var $=function(id){

return document.getElementById(id);

}

var number=[];

//给按钮的父元素添加事件委托，避免给每个按钮添加点击事件

$("button").addEventListener("click",function(e){

var target=e.target,

value=$("input").value;

switch(target.id){

case "leftin":{

if(!/^\d+$/.test(value))alert("请输入有效的数字");

else{

number.unshift(value);

show();

}

break;

}

case "rightin":{

if(!/^\d+$/.test(value)) alert("请输入有效的数字");

else{

number.push(value);

show();

}

break;

}

case "leftout":{

alert(number.shift(number[number.length-1]));

show();

break;

}

case "rightout":{

alert(number.pop(number[0]));

show();

break;

}

}

})

//给输出的结果添加事件委托，使点击的元素被删除

$("result").addEventListener("click",function(e){

var target=e.target;

if(target.nodeName!="LI") return;

var tar=parseInt(target.getAttribute("id")); //到被点击元素的id属性，之前id绑定的是该元素在数组中的序号

number.splice(tar,1);　　　//删除数组number中的元素，1代表只删除一个元素

show();

return number;

})

//将得到的用户输入数据输出显示到id为result的列表中

function show(){

var content=" ";

for(var i=0;i

content+="

"+number[i]+"";

}

result.innerHTML=content;

}

它的主要亮点是删除数组中的对应项来达到删除li的效果

$("result").addEventListener("click",function(e){

var target=e.target;

if(target.nodeName!="LI") return;

var tar=parseInt(target.getAttribute("id")); //到被点击元素的id属性，之前id绑定的是该元素在数组中的序号

number.splice(tar,1);　　　//删除数组number中的元素，1代表只删除一个元素

show();

return number;

这个代码还有一个亮点就是用了case语句，从而只添加了一个监听事件。

写这个小dome给我的感受是，我在写代码的过程中多思考的是html中元素的问题。插入和删除我都会从删除文本节点的方面去考虑，对js的应用处于表层，而别人的代码，则是基于一些js自带的函数考虑，更符合一门编程语言。这是我以后需要学习的。