用原生实现点击删除点击的li

简单的实现方式

<!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自带的函数考虑，更符合一门编程语言。这是我以后需要学习的。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • jQuery基础(2)
    (续jQuery基础(1)) 第5章 DOM节点的复制与替换 （1）DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,392评论 0赞 8
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,106评论 25赞 709
  • 前端面试题总结
    今天面试回来，稍微整理下今天被问到的题目，呀，回答的是乱七八糟，最后百度整理下，以供以后学习。 1,vue 中事件...
    AlisaMfz阅读 482评论 0赞 0