如何实现右键删除渐变编辑器中的颜色选择器功能？

你的代码存在几个核心问题导致功能失效，以下是修复方案：

问题分析 #

• 重复使用相同ID（remConBtn、remConMen），DOM中ID必须唯一，这会导致无法精准定位目标元素
• contextMenu()函数触发所有删除按钮的点击，无法关联当前右键操作的颜色选择器
• 未阻止浏览器默认右键菜单，会覆盖自定义菜单
• 删除选项未绑定对应的删除逻辑，无法移除相关元素
• CSS中z-index:-100会让删除按钮被遮挡，无法触发点击

修复后的完整代码 #

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

<div class="input-group" id="grContainer" oncontextmenu="return false;">
  <input class="form-control form-control-color color colao-1" type="color" />
</div>
<div id="Containerdp">
  <div class="btnc-1 remConBtn" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    |
  </div>
  <ul class="dropdown-menu dmnc-1">
    <li><a class="dropdown-item text-danger delete-btn" data-id="1"><i class="bi bi-trash3"></i> Delete</a></li>
  </ul>
</div>
<div id="BtnCreate" onclick="addColoru()"><i class="bi bi-plus" style="font-size: 30px"></i></div>

CSS

.remConBtn {
  top: -38px;
  position: relative;
  left: 30px;
  z-index: 10; /* 调整层级确保可点击 */
  display: initial;
  cursor: pointer;
}

JavaScript

const container = document.getElementById('grContainer');
const containe = document.getElementById('Containerdp');
let count = 1;

// 初始化第一个颜色选择器的右键事件
document.querySelector('.colao-1').addEventListener('contextmenu', handleColorRightClick);
// 初始化第一个删除按钮的点击事件
document.querySelector('.delete-btn').addEventListener('click', handleDeleteColor);

function addColoru() {
  count++;
  // 创建颜色选择器
  const newColor = document.createElement('input');
  newColor.className = `form-control form-control-color color colao-${count}`;
  newColor.type = 'color';
  newColor.addEventListener('contextmenu', handleColorRightClick);
  container.appendChild(newColor);

  // 创建删除按钮
  const newBtn = document.createElement('div');
  newBtn.className = `btnc-${count} remConBtn`;
  newBtn.type = 'button';
  newBtn.setAttribute('data-bs-toggle', 'dropdown');
  newBtn.setAttribute('data-bs-auto-close', 'true');
  newBtn.setAttribute('aria-expanded', 'false');
  newBtn.innerHTML = '|';
  containe.appendChild(newBtn);

  // 创建下拉菜单
  const newUl = document.createElement('ul');
  newUl.className = `dropdown-menu dmnc-${count}`;
  containe.appendChild(newUl);

  const newLi = document.createElement('li');
  newUl.appendChild(newLi);

  const newA = document.createElement('a');
  newA.className = 'dropdown-item text-danger delete-btn';
  newA.setAttribute('data-id', count);
  newA.innerHTML = '<i class="bi bi-trash3"></i> Eliminar';
  newA.addEventListener('click', handleDeleteColor);
  newLi.appendChild(newA);
}

// 处理颜色选择器右键事件
function handleColorRightClick(e) {
  e.preventDefault(); // 阻止默认右键菜单
  const colorId = this.classList[3].split('-')[1]; // 获取当前颜色的ID
  const targetBtn = document.querySelector(`.btnc-${colorId}`);
  // 关闭所有打开的下拉菜单
  document.querySelectorAll('.remConBtn').forEach(btn => {
    const dropdown = bootstrap.Dropdown.getInstance(btn);
    if (dropdown) dropdown.hide();
  });
  // 打开当前对应的下拉菜单
  new bootstrap.Dropdown(targetBtn).show();
}

// 处理删除颜色事件
function handleDeleteColor() {
  const colorId = this.getAttribute('data-id');
  // 移除颜色选择器
  document.querySelector(`.colao-${colorId}`).remove();
  // 移除删除按钮
  document.querySelector(`.btnc-${colorId}`).remove();
  // 移除下拉菜单
  document.querySelector(`.dmnc-${colorId}`).remove();
}

关键修改说明 #

1. 唯一标识关联：通过count为每个颜色选择器、删除按钮和下拉菜单添加唯一的类后缀（如colao-${count}、btnc-${count}），确保能精准定位对应元素
2. 右键事件处理：使用addEventListener绑定右键事件，阻止默认菜单，并只触发当前颜色对应的删除按钮下拉菜单
3. 删除逻辑绑定：为每个删除选项添加data-id属性关联对应颜色ID，点击时移除所有相关元素
4. 样式调整：修改z-index为正数，确保删除按钮可被点击
5. Bootstrap下拉菜单控制：使用Bootstrap官方的Dropdown API来手动控制菜单的显示和隐藏

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