[英]how can i get get the delete button to remove a single item from local storage
當我向列表中添加新項目時,它將為該特定項目創建一個刪除按鈕。 我想知道如何獲取刪除按鈕以從列表中刪除該項目,而不刪除所有其他項目,也將其從本地存儲中刪除。 我曾經嘗試過使其工作,但沒有運氣。
<div class = 'wrapper'>
<h2>Tapas Order</h2
<p></p>
<ul class="plates">
<li>Loading Tapas...</li>
</ul>
<ul>
<form class='add-items'>
<input type='text' name='item' placeholder='Item Name' required>
<input type='submit' value='+ Add Item'>
</form>
</ul>
</div>
<script>
const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const items = JSON.parse(localStorage.getItem('items')) || [];
function addItem (e){
e.preventDefault();
const text = this.querySelector('[name=item]').value;
const item = {
text,
done: false
};
items.push(item);
populateList(items, itemsList);
localStorage.setItem('items', JSON.stringify(items));
this.reset();
}
function populateList(plates = [], platesList){
platesList.innerHTML = plates.map((plate, i) => {
return`
<li>
<input type='checkbox' data-index=${i} id='item${i}' ${plate.done ? 'checked' : ''}/>
<label for='item${i}'>${plate.text} </label>
<button id='delete'>delete</delete>
</li>
`;
}).join('');
}
function toggleDone(e){
if(!e.target.matches('input')) return;
const el = e.target;
const index = el.dataset.index;
items[index].done = !items[index].done;
localStorage.setItem('items', JSON.stringify(items));
populateList(items, itemsList);
}
addItems.addEventListener('submit', addItem);
itemsList.addEventListener('click', toggleDone);
populateList(items, itemsList);
</script>
剛剛稍微修改了代碼:)
將此onclick添加到您的按鈕創建中:
<button id='delete' onclick="javascript:deleteItem(this,${i})">delete</delete>
並將此功能添加到腳本中:
function deleteItem(item,index){
//Azurethi was here!
items.splice(index, 1);
localStorage.setItem('items', JSON.stringify(items));
item.parentNode.remove();
populateList(items, itemsList);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.