JavaScript 删除项目 onclick

在 Web 开发中，我们经常会遇到需要删除某一个项目的需求。在 JavaScript 中，我们可以使用 onclick 事件来实现删除操作。本文将介绍如何使用 JavaScript 删除项目 onclick。

HTML 代码

我们先来看一下 HTML 代码，它是我们要操作的目标：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

JavaScript 代码

我们可以使用以下 JavaScript 代码来删除项目：

const myList = document.getElementById("myList");
myList.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    event.target.remove();
  }
});

我们首先获取了 ID 为 myList 的 ul 元素，然后给它添加了一个 click 事件监听器。当用户点击其中一个 li 元素时，我们会首先检查它的标签名是否为 LI，然后再将它从列表中移除。

jQuery 代码

如果您使用的是 jQuery，那么您可以使用以下代码来删除项目：

$("#myList").on("click", "li", function() {
  $(this).remove();
});

我们使用 jQuery 的 on 方法来绑定事件监听器。当用户点击 myList 中的某一个 li 元素时，我们会使用 jQuery 方法 remove() 来移除它。

结语

以上就是 JavaScript 删除项目 onclick 的方法。无论您使用原生 JavaScript 还是 jQuery，删除元素都是非常简单的。祝您编写愉快的代码！