push

之前我們有說到陣列可以利用 push 增加更多的陣列資料例如:

var framer =['小明','小花','小華'];
framer.push('老王');
console.log(framer);
//["小明", "小花", "小華", "老王"]

splice

splice 就是能把陣列的資料做刪除可以決定從哪個地方開始刪除，並從哪個位置開始計算刪除幾筆資料，像是這樣！

splice(0,2)
//0 從序號0開始
//2 刪除兩筆資料

如果我們要把上面的陣列['小明','小花','小華'];只留下小華就可以這樣寫

var framer =['小明','小花','小華'];
framer.splice(0,2)
//結果["小華"]

運用 splice 點擊後刪除資料

我們拿前一天的範例，之前是點擊農夫的姓名就顯示農夫年齡，如果要點擊農夫就刪掉農夫資料可以這樣寫：

HTML

<ul class="list"></ul>

JS

var country = [
  {
    farmer:'小明'
  }
  ,{
    farmer:'小花'
  }
  ,{
    farmer:'小華'
  }
  ,{
    farmer:'老王'
  }
]
var list = document.querySelector('.list');


//更新農場資料
function updateList(){
  var str = '';
  var len = country.length;
  for(var i = 0;len>i;i++){
    str+='<li data-num="'+i+'">'+country[i].farmer+'</li>'
  }
  list.innerHTML = str;
}
updateList();

//確認點擊的農夫是誰
function checkList(e){
  var num = e.target.dataset.num;
  console.log(e.target.nodeName);
  if(e.target.nodeName !== 'LI'){return};
  country.splice(num,1);
  updateList();
}
list.addEventListener('click',checkList,false);

其實改變的地方只有在 JS 第27行加了 country.splice(num,1);還有在 28行 在執行更新列表 updateList(); 如此而已！

原理

country.splice(num,1); 因為 num 我們有建立變數 var num = e.target.dataset.num; 所以點擊後他會跑到這個元素上，還記得我們在元素上有綁定 dataset 吧，他就跑到那個 num 數字上後面的 1 就是跑到那個位置去刪除一筆資料，後面的 updateList(); 則是代表資料被刪除後陣列需要重新渲染一遍，才有最新剩下的內容而陣列的序號也會重新排列，透過這些方式就使用點擊就刪除掉那個元素囉，明天就是系列文的最後一篇了!
繼續跟完它吧！

splice 點擊後刪除資料程式碼範例