我如何获得删除按钮以从本地存储中删除单个项目

Question

When I add a new item to the list it creates a delete button for that specific item. I would like to know how I can get the delete button to remove that item from the list without deleting all the other items and also removing it from local storage. I have tried before to get it to work but no luck.

<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>

Answer 1

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);
}