Tab欄-刪除

刪除的功能，主要的難點是點擊x按鈕時如何獲取index 從而得知關閉哪個。

這篇學習到的知識點為

1. if (document.querySelector(’.liactive’)) 在點擊時判斷，可以用於判斷是否當前點擊的元素帶有 liactive的class屬性
2. 當事件不加上on的時候表示即使沒有觸發事件，事件也會自動執行，此案件範例為 click( )，當其他地方需要再次調用和onclick一樣的函數事件時，可以這樣用。

此時，雖然span 上沒有所以但是li有索引，透過點擊子節點將獲取父節點的索引。
在addTab功能時已經在lis裡面增加了index屬性，所以可以透過 this.parentNode.index來獲取index
在點擊span帶時候要阻止冒泡（父節點li也有點擊切換功能）
與新增節點相同的是，在每次操作刪除功能時都要在重新獲取li的總數，以此更新動態刪除後的數量。

 init() {
                this.updateNode();
                this.add.onclick = this.addTab;
                for (var i = 0; i < this.lis.length; i++) {
                    this.lis[i].index = i;
                    this.lis[i].onclick = this.toggleTab;
                    this.remove[i].onclick = this.removeTab;
                }
            }
            updateNode() {
                this.lis = this.main.querySelectorAll('li');
                this.section = this.main.querySelectorAll('section');
                this.remove = this.main.querySelectorAll('.icon-guanbi');
                }
 
 removeTab(e) {
            e.stopPropagation(); // 阻止冒泡 防止触发li 的切换点击事件
            var index = this.parentNode.index;
            console.log(index);
            // 根据索引号删除对应的li 和section   remove()方法可以直接删除指定的元素
            that.lis[index].remove();
            that.sections[index].remove();
            that.init();
               // 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态
            index--;
            // 手动调用我们的点击事件  不需要鼠标触发
            that.lis[index] && that.lis[index].click();
        }

有個優化的地方是，當關閉的li並非當前的li時關閉後，因為之前的設定會自動點選到關閉的上一個li而非持續停留在當前li，此時只需判斷是否當前點擊元素帶有liactive的class屬性。並且調用點擊事件，此時因為要調用的功能和之前的點擊事件一樣，這樣只需要調用 click(　）事件，即使不點擊最初綁點的元素（ｌｉ）也可以調用事件。

 removeTab(e) {
            e.stopPropagation(); // 阻止冒泡 防止触发li 的切换点击事件
            var index = this.parentNode.index;
            console.log(index);
            // 根据索引号删除对应的li 和section   remove()方法可以直接删除指定的元素
            that.lis[index].remove();
            that.sections[index].remove();
            that.init();
               // 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变
            if (document.querySelector('.liactive')) return;
            /* 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态,
             如果選中的是第一個則刪除後仍讓第一個li保持選中*/
            index===0?index=0:index--;
            // 手动调用我们的点击事件  不需要鼠标触发
         　　　that.lis[index].click();
        }

來到了最後的階段，還有個ｂｕｇ是當所有的ｌｉ被刪除一個都沒有時候系統控制台會報錯，這是因為每次刪除ｌｉ時 index 都會遞減好讓让它的前一个li 处于选定状态。但是當到了index=0的 li 標籤 index遞減後變成-1，而循環後li裡面並沒有-1的index所以報錯，此時我們需要加個判斷，到了這裡剛開始我們都會想使用if，但是這裡pink老師給了很好的解決方法就是 && (AND運算符)，當前面 lis[index]為true時才執行後面的。
換句話說，index=-1時結果為false所以不會執行後面語句

            that.lis[index] && that.lis[index].click();

以上!!! 下個階段為修改section元素