关于Todo List删除按钮for循环的疑问：close[i]与parentElement解析

问题1：for (i = 0; i < close.length; i++)循环里close[i]的i是什么含义？ #

• document.getElementsByClassName('close')会返回一个HTMLCollection（HTML元素集合），包含页面上所有class为close的删除按钮。
• 这个集合是类数组结构，必须通过索引访问内部元素。i是循环的索引变量，从0开始递增，遍历集合里的每一个按钮：
  • 当i=0时，close[0]指向第一个删除按钮；
  • 当i=1时，close[1]指向第二个删除按钮；
  • 以此类推，直到i等于集合长度时结束循环，从而给每个删除按钮绑定点击事件。

问题2：删除按钮点击事件里的var div = this.parentElement是什么？父元素概念解释 #

• this在这里指代被点击的那个删除按钮。
• 父元素是DOM树的核心概念：HTML元素是嵌套存在的，比如你代码里每个删除按钮都嵌套在<li>标签内部，那么这个<li>就是按钮的父元素，按钮则是<li>的子元素。
• 注意：你代码里的变量名div有误导性，this.parentElement获取到的实际是<li>元素，改成li会更直观。
• 这条代码的作用是找到当前按钮所属的待办项（<li>），然后通过div.style.display = 'none'将该待办项隐藏，实现删除的效果。

你的代码： #

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div>
      <h2>ToDo</h2>
      <input type="text" id="inputum" />
      <button onclick="fonksiyonum()">Ekle</button>
    </div>

    <ul id="yeniUl"></ul>

    <script>
      function fonksiyonum() {
        var liEkle = document.createElement('li');
        var inputtaYazanlar = document.getElementById('inputum').value;
        var textim = document.createTextNode(inputtaYazanlar);

        liEkle.appendChild(textim);

        document.getElementById('yeniUl').appendChild(liEkle);
        document.getElementById('inputum').value = '';

        var button = document.createElement('BUTTON');
        var hiks = document.createTextNode('\u00D7');

        button.appendChild(hiks);
        liEkle.appendChild(button);

        button.className = 'close';
        var close = document.getElementsByClassName('close');

        for (i = 0; i < close.length; i++) {
          close[i].onclick = function () {
            var div = this.parentElement;
            div.style.display = 'none';
          };
        }
      }
    </script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者AnanReis