使用 ID 从本地存储中删除项目

Question

我希望能够删除我的车辆列表页面上的项目。当我单击“删除车辆”按钮时，似乎 ID 没有被传递，因为没有任何内容被删除。以下是我的车辆列表和删除逻辑：

vehicleIdsList.addEventListener('click', function(e) {
  const selectedId = e.target.textContent;
  const selectedVehicle = JSON.parse(localStorage.getItem(selectedId));

  // Display the selected vehicle details
  vehicleInfo.innerHTML = `
                <p><strong>ID:</strong> ${selectedVehicle.id}</p>
                <p><strong>Transaction Date:</strong> ${selectedVehicle.transactionDate}</p>
                <p><strong>Brand:</strong> ${selectedVehicle.brand}</p>
                <p><strong>Type:</strong> ${selectedVehicle.type}</p>
                <p><strong>Manufacture Year:</strong> ${selectedVehicle.manufactureYear}</p>
                <p><strong>Engine:</strong> ${selectedVehicle.engine}</p>
                <p><strong>Horse Power:</strong> ${selectedVehicle.horsePower}</p>
                <p><strong>Rating:</strong> ${selectedVehicle.rating}</p>
                <p><strong>Comments:</strong> ${selectedVehicle.comments}</p>
            `;

  // Enable the delete button
  deleteButton.disabled = false;
});

// Add click event listener to delete button
deleteButton.addEventListener('click', function() {
  const selectedId = vehicleInfo.querySelector('p strong:first-child').textContent;

  // Confirm deletion
  const confirmDelete = confirm(`Are you sure you want to delete vehicle with ID: ${selectedId}?`);

  if (confirmDelete) {
    // Delete the vehicle from localStorage
    localStorage.removeItem(selectedId);

    // Clear vehicle details
    vehicleInfo.innerHTML = '';

    // Disable the delete button
    deleteButton.disabled = true;

    // Show confirmation message
    alert(`Vehicle with ID: ${selectedId} deleted.`);
  }
});

我使用下面的代码从本地存储填充列表。所以基本上我希望能够使用其 ID 从列表中删除项目

for (let i = 0; i < localStorage.length; i++) {
  const id = localStorage.key(i);
  const li = document.createElement('li');
  li.textContent = id;
  vehicleIdsList.appendChild(li);
}

Answer 1

问题在于

p strong:first-child

不是车辆 ID 元素的选择器。该文本位于 after

p strong

，而不是它的子文本。

将其放在一个跨度中，以便您可以正确识别它。我用过下面的

<span class="vehicle_id">

。

vehicleIdsList.addEventListener('click', function(e) {
  const selectedId = e.target.textContent;
  const selectedVehicle = JSON.parse(localStorage.getItem(selectedId));

  // Display the selected vehicle details
  vehicleInfo.innerHTML = `
                <p><strong>ID:</strong> <span class="vehicle_id">${selectedVehicle.id}</span></p>
                <p><strong>Transaction Date:</strong> ${selectedVehicle.transactionDate}</p>
                <p><strong>Brand:</strong> ${selectedVehicle.brand}</p>
                <p><strong>Type:</strong> ${selectedVehicle.type}</p>
                <p><strong>Manufacture Year:</strong> ${selectedVehicle.manufactureYear}</p>
                <p><strong>Engine:</strong> ${selectedVehicle.engine}</p>
                <p><strong>Horse Power:</strong> ${selectedVehicle.horsePower}</p>
                <p><strong>Rating:</strong> ${selectedVehicle.rating}</p>
                <p><strong>Comments:</strong> ${selectedVehicle.comments}</p>
            `;

  // Enable the delete button
  deleteButton.disabled = false;
});

// Add click event listener to delete button
deleteButton.addEventListener('click', function() {
  const selectedId = vehicleInfo.querySelector('.vehicle_id').textContent;

  // Confirm deletion
  const confirmDelete = confirm(`Are you sure you want to delete vehicle with ID: ${selectedId}?`);

  if (confirmDelete) {
    // Delete the vehicle from localStorage
    localStorage.removeItem(selectedId);

    // Clear vehicle details
    vehicleInfo.innerHTML = '';

    // Disable the delete button
    deleteButton.disabled = true;

    // Show confirmation message
    alert(`Vehicle with ID: ${selectedId} deleted.`);
  }
});