JavaScript學習筆記-新增、刪除

<div class="content">

<div class="addlist">

<input type="text" class="text" required >

<input type="button" class="send" value="加入項目">

</div>

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

</div>

<script src='js/all.js'>

畫面放入一個textbox與button
按下button的時候會將textbox資料寫入ul\li

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

var sendData = document.querySelector('.send');

var data = JSON.parse(localStorage.getItem('listData')) ||[];

監聽項目

sendData.addEventListener('click',addData);

list.addEventListener('click',toggleDone);

updateList(data);

在寫入與刪除之後都會重新執行一次更新

function updateList(items){

str='';

var len=items.length;

for (var i = 0; len > i ;i++){

str+='<li><a href="#" data-index=' + i + '/>Del</a><span>' +items[i].content + '</span></li>';

}

list.innerHTML = str ;

}

新增

function addData(e){

e.preventDefault();

var txt = document.querySelector('.text').value;

var todo={

content:txt

};

data.push(todo);

updateList(data);

localStorage.setItem('listData',JSON.stringify(data));

}

刪除

function toggleDone(e) {

e.preventDefault();

if(e.target.tagName !=='A'){return};

var index = e.target.dataset.index;

data.splice(index,1);

localStorage.setItem('listData',JSON.stringify(data));

updateList(data);

}