利用事件委托的原理,实现删除数组中的元素-CSDN博客

本文链接：https://blog.csdn.net/xiaocantongxue/article/details/132641386

1.事件委托

利用事件冒泡的原理,把一个元素(子元素)的事件委托给另一个元素(上级元素).

优点:(1) 效率高,不用循环遍历;

(2) 可以给未来元素添加事件.

2.数组的高阶方法---filter

作用:根据条件筛选数组的元素,筛选出满足条件的数组中的元素,组成一个新的数组返回.

特点:返回的是一个新数组,不会改变原数组.

3.数组的高阶方法---findIndex

作用:查找数组中第一个满足条件的数组元素的下标,如果有,就返回这个元素的下标;反之,就返回-1.

特点:(1) 参数是一个函数,参数有三个形参,第一个参数是数组中的元素,第二个参数是元素的下标,第三个参数是原数组.

(2) 不会改变原数组.

4.数组的常用方法---splice

作用:根据索引删除数组中的某个元素.

语法:splice(从哪一索引位置开始,删除多少个,替换的新元素)

注意:(1) 第三个参数可以不写

(2) splice是删除数组中任意位置的元素

第一种方法:事件委托+filter

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>今日待办事项</h1>
    <ul>
      <!-- <li>
      <p>完成家庭作业</p>
      <button>删除</button>
    </li> -->
    </ul>

    <script>
      //1.定义一个数组,存储数据
      var arr = [
        { id: 1, title: '完成家庭作业' },
        { id: 2, title: '看电视' },
        { id: 3, title: '洗漱睡觉' },
      ];
      //3.调用函数
      renderList();

      var ul = document.querySelector('ul');
      //4.利用事件委托的原理,原本给删除按钮添加点击事件,因为删除按钮的父元素是ul,因此改为给ul添加点击事件
      ul.onclick = function (evt) {
        console.log(evt.target);
        //5.判断事件对象的事件源的类名
        if ((evt.target.className = 'del')) {
          console.log('点击了删除按钮');
          //6.获取自定义属性id
          var id = evt.target.dataset.id;
          console.log(id);
          //7.使用filter筛选数组中满足条件的元素
          /* filter返回的是一个新数组,它不会改变原数组 */
          arr = arr.filter(function (v) {
            return v.id != id;
          });
          console.log(arr);
          //8.重新渲染页面,再次调用函数
          renderList();
        }
      };
      // 2.将数组中的数据渲染到ul中,将其封装成一个函数
      function renderList() {
        //定义一个空的字符串
        var str = '';
        //获取ul元素
        var ul = document.querySelector('ul');
        //循环遍历数组
        arr.forEach(function (obj) {
          //使用模板字符串渲染数据
          var liStr = `
          <li>
              <p>${obj.title}</p>
              <button class="del" data-id="${obj.id}">删除</button>
          </li>
      `;
          //将渲染数据累加到空字符串上
          str += liStr;
          //将字符串的内容赋值给ul
          ul.innerHTML = str;
        });
      }
    </script>
  </body>
</html>

第二种方法:事件委托+findIndex

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>今日待办事项</h1>
    <ul>
      <!-- <li>
      <p>完成家庭作业</p>
      <button>删除</button>
    </li> -->
    </ul>

    <script>
      //1.定义一个数组,存储数据
      var arr = [
        { id: 1, title: '完成家庭作业' },
        { id: 2, title: '看电视' },
        { id: 3, title: '洗漱睡觉' },
      ];
      //3.调用函数
      renderList();

      var ul = document.querySelector('ul');
      //4.利用事件委托的原理,原本给删除按钮添加点击事件,因为删除按钮的父元素是ul,因此改为给ul添加点击事件
      ul.onclick = function (evt) {
        console.log(evt.target);
        //5.判断事件对象的事件源的类名
        if ((evt.target.className = 'del')) {
          console.log('点击了删除按钮');
          //6.获取自定义属性id
          var id = evt.target.dataset.id;
          console.log(id);
          //7.使用findIndex查找满足条件的一个元素的下标
          var i = arr.findIndex(function (v) {
            return v.id == id;
          });
          console.log(i);
          //8.使用splice方法进行删除
          arr.splice(i, 1);
          //9.重新渲染页面,再次调用函数
          renderList();
        }
      };
      // 2.将数组中的数据渲染到ul中,将其封装成一个函数
      function renderList() {
        //定义一个空的字符串
        var str = '';
        //获取ul元素
        var ul = document.querySelector('ul');
        //循环遍历数组
        arr.forEach(function (obj) {
          //使用模板字符串渲染数据
          var liStr = `
          <li>
              <p>${obj.title}</p>
              <button class="del" data-id="${obj.id}">删除</button>
          </li>
      `;
          //将渲染数据累加到空字符串上
          str += liStr;
          //将字符串的内容赋值给ul
          ul.innerHTML = str;
        });
      }
    </script>
  </body>
</html>