如何在按钮点击时添加或删除选项菜单项？

在按钮点击时添加或删除选项菜单项，可以通过以下步骤实现：

首先，需要在前端开发中使用HTML和CSS创建一个按钮和一个选项菜单。按钮可以使用<button>标签创建，选项菜单可以使用<ul>和<li>标签创建。
在按钮的点击事件中，可以使用JavaScript来添加或删除选项菜单项。可以通过以下步骤实现：
- 首先，使用document.createElement()方法创建一个新的选项菜单项元素。
- 然后，使用document.createTextNode()方法创建一个文本节点，并将其添加到选项菜单项元素中。
- 接下来，使用appendChild()方法将选项菜单项元素添加到选项菜单中。
- 如果要删除选项菜单项，可以使用removeChild()方法从选项菜单中移除相应的选项菜单项元素。

最后，可以使用CSS来美化选项菜单的样式，例如设置背景颜色、字体样式等。

以下是一个示例代码：

HTML代码：

<button id="btn">点击按钮</button>
<ul id="menu">
  <li>选项菜单项1</li>
  <li>选项菜单项2</li>
  <li>选项菜单项3</li>
</ul>

CSS代码：

#menu {
  display: none; /* 初始状态下隐藏选项菜单 */
  background-color: #f1f1f1;
  padding: 10px;
}

#menu li {
  cursor: pointer;
  padding: 5px;
}

#menu li:hover {
  background-color: #ccc;
}

JavaScript代码：

var btn = document.getElementById("btn");
var menu = document.getElementById("menu");

btn.addEventListener("click", function() {
  if (menu.style.display === "none") {
    menu.style.display = "block"; // 显示选项菜单
  } else {
    menu.style.display = "none"; // 隐藏选项菜单
  }
});

menu.addEventListener("click", function(e) {
  if (e.target.tagName === "LI") {
    menu.removeChild(e.target); // 删除选项菜单项
  }
});

这样，当按钮被点击时，选项菜单将显示或隐藏，同时可以通过点击选项菜单项来删除相应的项。

腾讯云相关产品和产品介绍链接地址：