iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 25
0
自我挑戰組

JavaScript基礎30天系列 第 25

JS BMI 基礎介紹(3) DAY25

今天我們要來將 BMI 最後兩個功能完成
首先我們來看如何刪除單一筆資料

//DOM
//單一筆資料
list.addEventListener('click',deleteData,false);
//全部資料
let trash = document.querySelector('.trash');
//監聽
trash.addEventListener('click',removeData,false);

function deleteData(e){
    let index = e.target.dataset.index;
    if(e.target.nodeName !== 'I'){
        return;
    }
    data.splice(index,1);
    localStorage.setItem('listData',JSON.stringify(data));
    update(data);
}

由於我們在組字串的時候
有利用dataset這個技巧
所以我們先把index(所在索引位置)取出來
這裡我們因為是監聽它的父元素
若點擊的 nodeNmae 並非 I
就return(中斷點)
否則

 data.splice(index,1);

從當前索引位置 刪除一筆資料
記得!!!!
localStorage 與 畫面 都必須更新


刪除多筆資料

function removeData(){  
    data.splice(0,data.length);
    localStorage.setItem('listData',JSON.stringify(data));
    update(data);
}

由於data.length代表資料長度
也就是總共有幾筆資料
從第0筆資料開始刪除
然後看有幾筆資料就刪除幾筆

最後附上這3天所有的程式碼
CodePen: https://codepen.io/wemyferb/pen/BazaZBP
明天將會開始介紹
如何利用Bootstrap4 搭配 AJAX 來撈取政府資料
敬請期待啦~~~


上一篇
JS BMI 基礎介紹(2) DAY24
下一篇
JS AJAX基礎實作(1) DAY26
系列文
JavaScript基礎30天30

尚未有邦友留言

立即登入留言