JS 筆記 - 點選清單項目時，刪除清單資料

先前有筆記如何刪除陣列資料的概念，這次的筆記是延伸應用 splice 的功能。
如何在點擊後，將所選到的清單內容刪除，並更新畫面?

條件如下:

1. 原本已有清單內容。
2. 有 click 事件。
3. 刪除清單資料。
4. 更新畫面。

HTML 跟 CSS 與上一篇內容相同，這邊是在 JS 加上一些語法達到效果。先回顧上一篇所講到的內容：

//JSON
var shops = [{
  keeper: '魯夫'
}, {
  keeper: '香吉士'
}]
//綁定 .list，使用父元素控制子元素
var list = document.querySelector('.list');

//為了把資料回填到 li 中，故透過這個函式將資料抓出後渲染到網頁上
//更新商店資料
function updateList() {
  var str = ''; //組一個字串，內容為空
  var shopLen = shops.length; //資料長度 2
  for (var i = 0; shopLen > i; i++) {
    str += '<li data-num="' + i + '">' + shops[i].keeper + '</li>'
  } //字串加總
  list.innerHTML = str; //渲染到字串，並渲染到網頁
  console.log(str);
}
updateList(); //執行函式


// 確認點擊的店長是誰
function checkList(e) {
  var num = e.target.dataset.num; //宣告一個 num ，當事件目標為自己，dataset 取出 num 的值
  console.log(e.target.nodeName); //確認 nodeName 是否為 'LI'
  if (e.target.nodeName !== 'LI') { //若選到的 nodeName 不是 LI，就回傳(停止函式)
    return
  };
  console.log('你選擇的店長為' + shops[num].keeper); //顯示選擇內容
}

//在 list 新增 click 事件
list.addEventListener('click', checkList, false);

這邊要新增的語法在函式 checkList 內的 return 後加上這段程式碼:

shops.splice(0, 1); //刪除陣列的第一筆與一筆資料
updateList(); //更新頁面資料

這樣在點擊後，就可以把選取到的 li 刪掉，函式checkList 完整程式碼如下:

function checkList(e) {
  var num = e.target.dataset.num; //宣告一個 num ，當事件目標為自己，dataset 取出 num 的值
  console.log(e.target.nodeName); //確認 nodeName 是否為 'LI'
  if (e.target.nodeName !== 'LI') { //若選到的 nodeName 不是 LI，就回傳(停止函式)
    return
  };
  shops.splice(0, 1); //刪除陣列的第一筆與一筆資料
  updateList(); //更新頁面資料
}

codepen: https://codepen.io/hnzxewqw/pen/RwPgOdG