如何在 JavaScript 中单击时删除项目

在 JavaScript 中，删除项目通常是指从数组或列表中删除某个元素。当用户单击某个按钮或元素时，我们可以使用事件监听器来捕获单击事件，并在事件处理程序中删除元素。

步骤

以下是从 JavaScript 数组和列表中删除元素的步骤：

1. 在 HTML 中添加一个元素作为容器，以存储我们的项目列表。

 <ul id="itemList"></ul>

2. 在 JavaScript 中定义一个数组或列表，以存储我们的项目。

const items = ['Item 1', 'Item 2', 'Item 3'];

3. 使用 JavaScript 将项目添加到 HTML 列表中。

const itemList = document.getElementById('itemList');

items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  itemList.appendChild(li);
});

4. 添加单击事件监听器，以便在单击项目时删除它。

itemList.addEventListener('click', event => {
  const li = event.target;
  li.parentNode.removeChild(li);
});

完整代码片段如下所示：

const items = ['Item 1', 'Item 2', 'Item 3']; // Step 2

const itemList = document.getElementById('itemList'); // Step 1

items.forEach(item => { // Step 3
  const li = document.createElement('li');
  li.textContent = item;
  itemList.appendChild(li);
});

itemList.addEventListener('click', event => { // Step 4
  const li = event.target;
  li.parentNode.removeChild(li);
});

解释

上面的代码片段中，我们首先在 HTML 中添加了一个列表 <ul> 元素，并设置了一个 ID 为 itemList。然后在 JavaScript 中定义了一个数组 items，其中包含三个项目。我们使用 forEach 方法循环遍历数组中的每个项目，并使用 document.createElement 和 appendChild 方法将每个项目作为列表项 <li> 添加到 HTML 中的列表中。

接下来，我们为列表添加了一个单击事件监听器，以便在单击列表项时删除它。事件监听器捕获单击事件，并使用 event.target 属性获取单击的列表项元素。然后使用 parentNode.removeChild 方法从列表中删除元素。

总结

在 JavaScript 中单击时删除项目是一项基本技术，它需要事件监听器和 JavaScript 方法的使用。通过了解以上步骤和代码片段，您可以在自己的项目中使用它，并从列表或数组中删除元素。