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

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

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

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

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

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); // 删除选项菜单项
  }
});