如何使用JavaScript为列表中的每个元素添加独立删除按钮

Got it, let's work through adding individual delete buttons to each of your list items for that inventory tracker you're building! Here's a straightforward, step-by-step approach tailored to your needs:

When you generate a new list item after saving an item and its location, you’ll need to attach a delete button directly to that item. Here’s an example of dynamic element creation in JavaScript that does this:

// Function to build a list item with a delete button
function createInventoryItem(itemName, location) {
  const listItem = document.createElement('li');
  
  // Add the item's details text
  const itemDetails = document.createElement('span');
  itemDetails.textContent = `${itemName} - Stored at: ${location}`;
  listItem.appendChild(itemDetails);
  
  // Create the delete button
  const deleteButton = document.createElement('button');
  deleteButton.textContent = 'Delete Record';
  deleteButton.classList.add('item-delete-btn'); // For styling later
  
  // Add click functionality to remove the item
  deleteButton.addEventListener('click', () => {
    // Remove the list item from the DOM first
    listItem.remove();
    // Then update your saved data (like localStorage)
    deleteFromInventory(itemName, location);
  });
  
  listItem.appendChild(deleteButton);
  return listItem;
}

Since you’re saving inventory records, you’ll need a way to remove the specific item from your stored data when the delete button is clicked. If you’re using localStorage, here’s how you might implement that:

function deleteFromInventory(itemName, location) {
  // Get existing inventory data
  let inventory = JSON.parse(localStorage.getItem('inventoryRecords')) || [];
  
  // Filter out the item we want to delete
  inventory = inventory.filter(record => 
    record.item !== itemName || record.location !== location
  );
  
  // Save the updated inventory back to localStorage
  localStorage.setItem('inventoryRecords', JSON.stringify(inventory));
}

If you load saved inventory items when your app starts up, use the same createInventoryItem function to render them. That way, every existing item will automatically have a working delete button attached—no extra work needed!

Add some CSS to make the delete buttons look polished and easy to use:

.item-delete-btn {
  margin-left: 15px;
  padding: 4px 10px;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

.item-delete-btn:hover {
  background-color: #c0392b;
}

If you still want to keep the bulk delete option around for convenience, you can leave that code in place—it won’t conflict with the individual delete buttons. If you don’t need it anymore, just remove the button element and its associated event listener from your code.

That should do it! Now each inventory record will have its own delete button, so you can easily remove old entries when items move locations, then add the updated record right after.

内容的提问来源于stack exchange，提问作者Coding4life