Element对象，通过点击按钮删除前一个，后一个以及当前节点，主要用到：parentNode,previousSibling,nextSibling,removeChild()等

最新推荐文章于 2021-10-24 18:55:42 发布

哦~江湖小白

最新推荐文章于 2021-10-24 18:55:42 发布

阅读量811

点赞数

分类专栏： java-script

本文链接：https://blog.csdn.net/mhj0201/article/details/82141918

版权

java-script 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload=function(){
                var li_arr=document.getElementsByTagName("li");
                for(var i=0;i<li_arr.length;i++){
                    var input_arr=li_arr[i].getElementsByTagName("input");
                    input_arr[0].onclick=function(){//删除前一个li节点
                        var li=this.parentNode;
                        var br=li.previousSibling;//获取li前面的换行
                        br.parentNode.removeChild(br);//删除换行标签
                        pre_li=li.previousSibling;//获取前一个li
                        pre_li.parentNode.removeChild(pre_li);
                    }
                    //删除当前节点
                    input_arr[1].onclick=function(){
                        var li=this.parentNode;
                        li.parentNode.removeChild(li);
                    }
                    //删除后一个li节点
                    input_arr[2].onclick=function(){
                        var li=this.parentNode;
                        var br=li.nextSibling;//获取到换行标签
                        br.parentNode.removeChild(br);
                        var next_li=li.nextSibling;//获取后一个li
                        next_li.parentNode.removeChild(next_li);

                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="container">
            <ul>
                <li>1111<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
                <li>2222<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
                <li>3333<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
                <li>4444<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
                <li>5555<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
                <li>6666<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
                <li>7777<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
                <li>8888<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
            </ul>
        </div>
    </body>
</html>

通过点击删除前一个可以删除前一个节点，删除当前即可删除掉当前节点，删除后一个即可删除掉后一个节点

哦~江湖小白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Element对象，通过点击按钮删除前一个，后一个以及当前节点，主要用到：parentNode,previousSibling,nextSibling,removeChild()等

&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; window.onload=function(){ var li_arr=documen
复制链接

扫一扫