点击按钮为每个按钮添加/移除对应.modal-item div的实现需求

没问题，我来帮你搞定这个需求！核心逻辑就是让每个按钮扮演"开关"角色：点击时先检查对应的专属.modal-item是否存在——如果已经在.modal里就移除它，不存在就创建并插入进去。下面是完整的可运行代码，每部分我都给你讲明白：

HTML 结构 #

首先我们需要基础的按钮组和.modal容器，给每个按钮加个自定义属性data-item-id来标记它对应的专属item，方便后续关联：

<!-- 按钮组 -->
<div class="btn-group">
  <button class="toggle-btn" data-item-id="item1">Btn 1</button>
  <button class="toggle-btn" data-item-id="item2">Btn 2</button>
  <button class="toggle-btn" data-item-id="item3">Btn 3</button>
</div>

<!-- 模态内容容器 -->
<div class="modal"></div>

CSS 样式（可选，让界面更直观） #

加一点基础样式区分不同元素，你可以根据自己的需求调整：

.btn-group {
  margin: 20px;
}

.toggle-btn {
  padding: 8px 16px;
  margin-right: 10px;
  cursor: pointer;
}

.modal {
  margin: 20px;
  padding: 10px;
  border: 1px solid #eee;
  min-height: 100px;
}

.modal-item {
  padding: 15px;
  margin-bottom: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.modal-item .close-btn {
  float: right;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}

JavaScript 核心逻辑 #

这里用append和remove方法实现切换，关键是通过自定义属性关联按钮和对应的item：

// 获取所有切换按钮和modal容器
const toggleBtns = document.querySelectorAll('.toggle-btn');
const modalContainer = document.querySelector('.modal');

// 给每个按钮绑定点击事件
toggleBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    const itemId = this.dataset.itemId;
    // 检查当前是否已经存在对应的modal-item
    const existingItem = modalContainer.querySelector(`.modal-item[data-item-id="${itemId}"]`);

    if (existingItem) {
      // 如果存在，移除它
      existingItem.remove();
    } else {
      // 如果不存在，创建新的modal-item元素
      const newItem = document.createElement('div');
      newItem.className = 'modal-item';
      newItem.dataset.itemId = itemId;

      // 给每个item添加专属内容（这里可以根据需求自定义）
      let itemContent = '';
      switch(itemId) {
        case 'item1':
          itemContent = `
            <h3>这是Btn 1的专属内容</h3>
            <p>我是只有点击Btn1才会出现的内容哦！</p>
            <button class="close-btn" data-item-id="${itemId}">×</button>
          `;
          break;
        case 'item2':
          itemContent = `
            <h3>Btn 2的专属区域</h3>
            <ul>
              <li>列表项1</li>
              <li>列表项2</li>
            </ul>
            <button class="close-btn" data-item-id="${itemId}">×</button>
          `;
          break;
        case 'item3':
          itemContent = `
            <h3>Btn 3的专属模块</h3>
            <img src="https://picsum.photos/200/100" alt="随机图片">
            <button class="close-btn" data-item-id="${itemId}">×</button>
          `;
          break;
      }

      // 把内容插入到新创建的item里，再添加到modal容器
      newItem.innerHTML = itemContent;
      modalContainer.append(newItem);

      // 给新item里的关闭按钮绑定事件（可选，方便直接在item内关闭）
      const closeBtn = newItem.querySelector('.close-btn');
      closeBtn.addEventListener('click', function() {
        newItem.remove();
      });
    }
  });
});

关键要点说明 #

• 自定义属性关联：用data-item-id把按钮和对应的.modal-item绑定起来，这样不管有多少个按钮，逻辑都能通用，不用写重复代码。
• 切换逻辑：每次点击按钮先检查目标item是否存在，存在就移除，不存在就创建并append到.modal里，完美实现"复选框式"的切换效果。
• 专属内容定制：通过switch-case给每个item设置不同的嵌套内容，你可以根据自己的需求修改这部分，比如换成从后端获取的内容，或者提前写好的模板。
• 额外优化：我还给每个.modal-item加了关闭按钮，用户可以直接点击item里的叉号关闭，提升交互体验，如果你不需要可以删掉这部分代码。

内容的提问来源于stack exchange，提问作者Kyle Underhill