iT邦幫忙

第 12 屆 iThome 鐵人賽

0
Modern Web

JavaScript 從零開始系列 第 39

JavaScript - 從零開始 - Day39 - 點選清單項目時,刪除清單資料

JavaScript Note

先前有筆記如何刪除陣列資料的概念(連結),這次的筆記是延伸應用 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


上一篇
JavaScript 從零開始 - Day38 - Mousemove 滑鼠移動到指定元素事件
下一篇
JavaScript 從零開始 - Day40 - 取得與清除 input 的值
系列文
JavaScript 從零開始40

尚未有邦友留言

立即登入留言