zoukankan      html  css  js  c++  java
  • 删除节点 案例

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                padding: 100px;
            }
            
            textarea {
                 200px;
                height: 100px;
                border: 1px solid pink;
                outline: none;
                resize: none;
            }
            
            ul {
                margin-top: 50px;
            }
            
            li {
                 300px;
                padding: 5px;
                background-color: rgb(245, 209, 243);
                color: red;
                font-size: 14px;
                margin: 15px 0;
            }
            
            li a {
                float: right;
            }
        </style>
    </head>

    <body>
        <textarea name="" id=""></textarea>
        <button>发布</button>
        <ul>

        </ul>
        <script>
            //  1 获取元素
            var btn = document.querySelector('button');
            var text = document.querySelector('textarea');
            var ul = document.querySelector('ul');

            // 注册事件
            btn.onclick = function() {
                if (text.value == '') {
                    alert('请输入内容...');
                    return false;
                } else {
                    // 创建元素
                    var li = document.createElement('li');
                    li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
                    // 添加元素
                    //ul.appendChild(li);
                    ul.insertBefore(li, ul.children[0]);
                    text.value = '';

                    // 删除元素
                    var as = document.querySelectorAll('a');
                    for (var i = 0; i < as.length; i++) {
                        as[i].onclick = function() {
                            ul.removeChild(this.parentNode);
                        }
                    }

                }
            }
        </script>
    </body>

    </html>
  • 相关阅读:
    Happy New Year
    CF1450G
    理希的NOI2020退役记
    luoguP4859 已经没有什么好害怕的了(二项式反演)
    知识点简单总结——二项式反演
    bzoj4671 异或图(斯特林反演,线性基)
    知识点简单总结——斯特林数、斯特林反演
    uoj450 【集训队作业2018】复读机(生成函数,单位根反演)
    有标号DAG计数(生成函数)
    知识点简单总结——单位根反演
  • 原文地址:https://www.cnblogs.com/ericblog1992/p/13053998.html
Copyright © 2011-2022 走看看