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

动态表单生成: 根据用户操作动态添加或删除表单字段。
配置界面: 允许用户根据需要自定义界面选项。
数据展示: 根据数据变化动态更新显示选项。

要在按钮点击时添加或删除选项菜单项，可以使用JavaScript来操作DOM元素。以下是一个简单的示例，展示了如何实现这一功能：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态菜单项</title>
</head>
<body>
    <button id="toggleButton">添加/删除菜单项</button>
    <select id="menu">
        <!-- 初始菜单项 -->
        <option value="item1">选项1</option>
    </select>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.getElementById('toggleButton').addEventListener('click', function() {
    const menu = document.getElementById('menu');
    const currentItems = menu.options.length;
    const newItemText = `选项${currentItems + 1}`;

    if (currentItems % 2 === 0) {
        // 添加新菜单项
        const newOption = document.createElement('option');
        newOption.value = `item${currentItems + 1}`;
        newOption.text = newItemText;
        menu.add(newOption);
    } else {
        // 删除最后一个菜单项
        if (currentItems > 1) {
            menu.remove(currentItems - 1);
        }
    }
});