3.使用原生js实现简单列表的增加、修改、删除

1.描述

/*

     事件委托: 本来该子元素的事情 交给父元素, 父元素接收到事件之后, 会找到触发的子元素，交给子元素处理
     原理: 事件加给父元素 通过触发源(target、srcElement)找到子元素
     优点: 1. 执行速度快
           2. 子元素可以发生在未来
    描述：
      点击添加按钮，弹出一个文本输入框，将输入的值，添加到ul列表中
      点击ul的时候  判断触发源的innerText  （使用事件委托）
                    如果是 删除  删除整行li 
                    如果是修改 弹出prompt 点击确定 修改当前li的内容
*/

​

2.HTML

  <div>
        <ul>
            <li>列表1<p><span>修改</span><span>删除</span></p>
            </li>
            <li>列表2 <p><span>修改</span><span>删除</span></p>
            </li>
            <li>列表3 <p><span>修改</span><span>删除</span></p>
            </li>
            <li>列表4 <p><span>修改</span><span>删除</span></p>
            </li>
            <li>列表5<p><span>修改</span><span>删除</span></p>
            </li>
        </ul>
        <button>添加</button>
    </div>

3.CSS

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        div {
            width: 400px;
            margin: 30px auto;
        }

        ul {
            width: 100%;
            margin-bottom: 20px;
        }


        li {
            height: 50px;
            line-height: 50px;
            overflow: hidden;
            border-bottom: 2px solid red;
            box-sizing: border-box;
        }

        p {
            height: 30px;
            margin-top: 10px;
            float: right;
            text-align: center;
            line-height: 30px;
            color: #fff;
            overflow: hidden;
        }

        span {
            width: 50px;
            height: 30px;
            background: red;
            float: left;

        }

        span:nth-child(1) {
            margin-right: 10px;
            background: green;
        }

        button {
            width: 50px;
            height: 25px;
            margin-left: 175px;
        }
    </style>

4.1 获取元素：需要获取button和ul
 

// 1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // console.log(ul, btn);

4.2 添加点击事件

        4.2.1点击按钮，在ul中新增一行li

        // 2.添加事件  
        // 2.1 点击按钮
        btn.onclick = function () {
            // 弹出一个文本输入框，将输入的值，添加到ul列表中
            var txt = prompt('请输入文本');
            // console.log(txt);
            // 如果弹出框的值不为空字符，并且不是null
            if (txt.trim() != '' && txt != null) {
                // 创建一个li标签
                var li = document.createElement('li');
                // 渲染li：将文本输入框的值赋值到li的内容中
                li.innerHTML = txt + '<p><span>修改</span><span>删除</span><p>';
                // 将新创建的li追加到父元素ul中
                ul.appendChild(li);
            }
        }

4.2.2 点击ul：

                如果事件源为 修改  修改对应li中的内

                如果事件源为 删除  删除对应整行li       

        // 使用事件委托实现修改、删除功能
        // 2.2 给ul添加点击事件
        ul.onclick = function (evs) {
            // 获取事件对象
            var ev = window.event || evs;
            // console.log(ev);
            // 获取触发源
            var tar = ev.target || ev.querySelector;
            // console.log(tar);
            // 如果点击的是：修改
            if (tar.innerHTML == '修改') {
                // 弹出一个文本输入框，将输入的值，添加到ul列表中
                var txt = prompt('请输入新内容:');
                if (txt.trim() != '' && txt != null) {
                    // 修改li的内容 （通过触发源找它的父级的父级li）
                    tar.parentNode.parentNode.innerHTML = txt + '<p><span>修改</span><span>删除</span><p>';
                }
                // 如果触发源是：删除
            } else if (tar.innerHTML == '删除') {
                // 删除整行li
                tar.parentNode.parentNode.remove();
            }
        }