# 5. splice - 刪除 array 資料

# HTML:

- 建立任務環境: style 作為方便辨識而設計用：

    <ul class="list" style="background-color: #000; color: white; padding: 15px;">

    </ul>

### JS:

#### 兩塊主要函式：

##### 製作滑鼠點擊名字後，將資料刪除的動作

- updateList(); -- 預設畫面、更新畫面
- checkName(); -- 針對執行動作設計

// 陣列資料:

var country = [
    {
        farmer: '查理',
    },
    {
        farmer: '卡斯柏',
    },
    {
        farmer: '強森',
    },
];




// 綁定 .list:

var el = document.querySelector('.list');

---

#### 更新資料用:

- 且產出 `li` 綁定資料: `date-num`

function updateList() {
    var str = '';
    var len = country.length;
    for (var i = 0; i < len; i++) {
        str += '<li data-num="' + i + '">' + country[i].farmer + '</li>';
    }
    el.innerHTML = str;
}

updateList();

---

#### 即時動作 event - 按下姓名資料被刪除，同時執行更新資料:

function checkName(e) {
    var checkLI = e.target.nodeName;
    var num = e.target.dataset.num;
    if (checkLI !== "LI") { return };
    country.splice(num, 1); // 刪除陣列的方式 （num , 一次刪除1個）
    updateList();
}


el.addEventListener('click', checkName, false);

###### tags: `JavaScript - localStorage`