今天我們要來將 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 來撈取政府資料
敬請期待啦~~~