javascript - 如何获得删除按钮以从本地存储中删除单个项目
问题描述
当我向列表中添加新项目时,它会为该特定项目创建一个删除按钮。我想知道如何获得删除按钮以从列表中删除该项目而不删除所有其他项目并将其从本地存储中删除。我以前试过让它工作,但没有运气。
<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>
解决方案
Just modified your code slightly :)
add this onclick to your button creation:
<button id='delete' onclick="javascript:deleteItem(this,${i})">delete</delete>
and add this function to your script:
function deleteItem(item,index){
//Azurethi was here!
items.splice(index, 1);
localStorage.setItem('items', JSON.stringify(items));
item.parentNode.remove();
populateList(items, itemsList);
}
推荐阅读
- windows - 卸载并重新安装 RabbitMQ 后无法启动 RabbitMq 服务
- sql-server - 承诺不在节点 js 中运行 T-SQL 查询
- sql - SQL - 通过增加另一个字段的“优先级”来过滤具有相同名称和顺序的记录
- javascript - 自定义意图的 AWS lambda 超时
- java - 从war文件访问Spring Boot的资源/静态文件夹中的文件
- sql - 如何为登录用户建立权限?
- android - 无法在片段中使用 TextInputLayout
- jquery - 使用 jquery 禁用基于天数的选择选项
- ios - 检测用户何时中断 UIScrollView 动画
- java - 编辑面板内的任何组件时出现 NullpointerException 错误