如何使用相同按钮添加和删除片段

在前端开发中，使用相同按钮添加和删除片段可以通过以下步骤实现：

1. 首先，在HTML中创建一个按钮元素，并为其添加一个唯一的ID，例如：

<button id="addButton">添加片段</button>

1. 接下来，在JavaScript中获取该按钮元素，并为其添加点击事件监听器。当按钮被点击时，执行相应的函数。例如：

var addButton = document.getElementById("addButton");
addButton.addEventListener("click", addFragment);

1. 在JavaScript中，编写addFragment函数来处理添加片段的逻辑。该函数可以通过动态创建HTML元素来实现。例如，可以创建一个<div>元素作为片段，并将其添加到指定的容器中。以下是一个示例：

function addFragment() {
  var fragment = document.createElement("div");
  fragment.innerHTML = "这是一个新的片段";
  
  var container = document.getElementById("container");
  container.appendChild(fragment);
}

在上述示例中，container是一个容器元素的ID，用于存放添加的片段。

1. 如果需要实现删除片段的功能，可以在每个片段中添加一个删除按钮，并为其添加点击事件监听器。当删除按钮被点击时，执行相应的函数来删除对应的片段。以下是一个示例：

function deleteFragment(fragment) {
  fragment.parentNode.removeChild(fragment);
}

在上述示例中，fragment是要删除的片段元素。

通过以上步骤，你可以实现使用相同按钮添加和删除片段的功能。请注意，这只是一个基本的示例，你可以根据实际需求进行修改和扩展。