简单的实现方式

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#button{
display:inline-block;
}
ul{
list-style: none;
}
li{
background-color: red;
display:inline-block;
width:20px;
padding:10px;
margin-left:3px;
color:white;
}
</style>
<script type="text/javascript">
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.onclick=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.onclick=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.onclick=function(){
alert(number.shift(number[number.length-1]));
show();
}
oBtn4.onclick=function(){
alert(number.pop(number[0]));
show();
} /*var i1='document.getElementById("'+i+'")';
console.log(i1);
i1.onclick=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<number.length;i++){
content+="<li>"+number[i]+"</li>";
} result.innerHTML=content;
} }; </script> </head>
<body>
<input id="input" type="text">
<div id="button">
<button id="leftin">左侧入</button>
<button id="rightin">右侧入</button>
<button id="leftout">左侧出</button>
<button id="rightout">右侧出</button>
</div>
<ul id="result">
</ul> </body>
</html>

这种方法原理是用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 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task18</title>
<style>
#button{
display:inline-block;
}
ul{
list-style: none;
}
li{
background-color: red;
display:inline-block;
width:20px;
padding:10px;
margin-left:3px;
color:white;
}
</style>
</head>
<body>
<input id="input" type="text">
<div id="button">
<button id="leftin">左侧入</button>
<button id="rightin">右侧入</button>
<button id="leftout">左侧出</button>
<button id="rightout">右侧出</button>
</div>
<ul id="result">
</ul>
<script>
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<number.length;i++){
content+="<li id='"+i+"'>"+number[i]+"</li>";
}
result.innerHTML=content;
}
</script>
</body>
</html>

它的主要亮点是删除数组中的对应项来达到删除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自带的函数考虑,更符合一门编程语言。这是我以后需要学习的。

用原生实现点击删除点击的li的更多相关文章

  1. React 点击删除列表中对应项(React 获取DOM中自定义属性)

    点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框( ...

  2. 使用原生JS,实现鼠标点击爱心效果 !!!

    使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的.其实实现起来也很简单,下面一起来学习一下吧.文末附上 ...

  3. mui 列表项左右滑删除功能升级(仿微信左滑 点击删除后出现确认删除)

    mui 列表项左右滑删除功能升级(仿微信左滑 点击删除后出现确认删除) 2018-06-19更新显示样式

  4. jquery对类的操作,添加,删除,点击添加,再点击删除

    jquery对类的操作,添加(addClass),删除l类(remoceClass),点击添加,再点击删除(toggleClass)

  5. textarea与标签组合,点击标签填入标签内容,再次点击删除内容(vue)

    需求:将textarea与span标签组合,点击标签自动填入标签文本内容,再次点击删除标签文本对应内容 原理:点击标签时,将标签内容作为参数,将内容拼接在textarea的value后面,再次点击标签 ...

  6. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

  7. android selector 背景选择器的使用, button (未点击,点击,选中保持状态)效果实现

              android selector 背景选择器的使用, button (未点击,点击,选中保持状态)效果实现 首先看到selector的属性: android:state_focus ...

  8. (79)【按键】[独立按键] - 1: 单击,双击,三击以及N击

    此按键程序的实现的功能是单个独立按键的[单击],[长按],[双击],[三击]以及[多击].本文分为三个部分, 第一个部分是说[单击],[长按]的程序: 第二部分是讲[双击]: 第三部分是讲[三击],[ ...

  9. ASP.NET - Repeater控件删除按钮,点击删除信息

    前台代码: <!--类别信息--> <div id ="newnews" class ="Frm"> <h4>类别管理< ...

随机推荐

  1. Winform控件Tag使用规范

    背景 Tag在WinForm控件中经常被用来存储临时数据,类型为object,但是当程序中多个地方使用到Tag时,容易造成Tag使用的混乱,Tag是如此重要的一个属性,应该要好好考虑下如何有效的使用T ...

  2. css选择器的优先级问题

    当我们写页面的时候,不知道你会不会产生这样的问题,为什么我给他添加的这条样式分明已经选择到我要给的元素了,但是他的样式并没有生效,那是为什么呢? 定义的属性有冲突时,浏览器会选择用那一套样式呢,下面来 ...

  3. thinkphp实现文件的下载

    首先需要看一下大家使用的Thinkphp的版本,不同的版本使用的方法不同,(在导入公共函数的时候方式不同) 我用的是thinkphp3.2.2版本的,因此直接使用import()函数,直接把使用thi ...

  4. 逻辑运算&数据

    数据在计算机中只是0和1而已 数据在我们的理论中可以无穷大,但是在计算机中并不是,毕竟硬盘是有大小的. 具体可以通过一张图来理解 例如,0-F的表示 上面是有符号数,那么无符号数则是 事实上,计算机中 ...

  5. 项目实战6—Mysql实现企业级日志管理、备份与恢复实战

    Mysql实现企业级日志管理.备份与恢复实战 环境背景:随着业务的发展,公司业务和规模不断扩大,网站积累了大量的用户信息和数据,对于一家互联网公司来说,用户和业务数据是根基.一旦公司的数据错乱或者丢失 ...

  6. poj 3070 && nyoj 148 矩阵快速幂

    poj 3070 && nyoj 148 矩阵快速幂 题目链接 poj: http://poj.org/problem?id=3070 nyoj: http://acm.nyist.n ...

  7. Codeforces 890C - Petya and Catacombs 模拟

    C. Petya and Catacombstime limit per test1 secondmemory limit per test256 megabytesinputstandard inp ...

  8. linux使用mysql给一个用户赋予一个权限

    GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '123456' WITH GRANT OPTION;

  9. linux进程管理和系统状态查看命令简介

    1 进程管理简介 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础 2 常用命令 2.1 pstree 2.1.1 功能描 ...

  10. jquery on()动态绑定元素的的点击事件无反应的问题记录

    1.jquery使用版本:v2.0 2.重现代码: html <table class="table"> <thead> <tr> <th ...