如何创建一个逐个删除元素的函数？

Question

我正在用JavaScript创建一个渐变编辑器，我已经创建了添加颜色的功能，但是我无法创建删除颜色的功能，想法是当访问者右键单击颜色选择器（

<input type="color">

）时显示带有删除颜色选项的子菜单。

但是我尝试的越多，我无法实现右键单击时显示与选择器相对应的子菜单，并且在按钮中出现相应的功能来消除该选择器。

这是我减少的html：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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" oncontextmenu="contextMenu()" type="color"/>
</div>
<div id="Containerdp">
<div id="remConBtn" 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" id="remConMen">
  <li><a class="dropdown-item text-danger"><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>

Javascript：

var container = document.getElementById('grContainer');
var endValueIn = document.getElementById('endGrValue');
var grType = document.getElementById('typeGrSel');
var dirGrSelA = document.getElementById('dirGrSelA');
var BtnCreate = document.getElementById('BtnCreate');
var colors = document.querySelectorAll(".color");
var count = 1;
var containe = document.getElementById('Containerdp');
function addColoru() {
 count = count + 1;
var newColor = document.createElement('input');
 newColor.className = `form-control form-control-color color colao-${count}`;
 newColor.setAttribute('type', 'color');
 newColor.setAttribute('oncontextmenu', 'contextMenu()');
 container.appendChild(newColor);
 var newBtn = document.createElement('div');
 newBtn.id = 'remConBtn';
newBtn.className = `btnc-${count} remConBtn`;
newBtn.setAttribute('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);
 var newUl = document.createElement('ul');
newUl.id = 'remConMen';
newUl.className = `dropdown-menu dmnc-${count}`;
containe.appendChild(newUl);
var newLi = document.createElement('li');
newUl.appendChild(newLi);
var newA = document.createElement('a');
newA.className = 'dropdown-item text-danger';
newA.innerHTML = '<i class="bi bi-trash3"></i> Eliminar';
newLi.appendChild(newA);
}
function contextMenu() {
var remConBtn = document.querySelectorAll('.remConBtn');
var inuu = 0;
var lengthww = remConBtn.length;
for ( ; inuu < lengthww; inuu++) {
remConBtn[inuu].click();
}
}

CSS：

#remConBtn{
top: -38px;
  position: relative;
  left: 30px;
  z-index: -100;
  display: initial;
  }

CodePen 上的完整版本：https://codepen.io/Puma-Murca/pen/bGZGKEp

注意：我正在使用外部库（Bootstrap），所以我不需要使用 JQuery 的问题

Answer 1

这是代码的更新版本，它为每个颜色选择器和下拉菜单使用唯一的 ID：

  var count = 1;

  function addColoru() {
    count = count + 1;

    var container = document.getElementById('grContainer');
    var containe = document.getElementById('Containerdp');

    var newColor = document.createElement('input');
    newColor.className = `form-control form-control-color color colao-${count}`;
    newColor.setAttribute('type', 'color');
    newColor.setAttribute('oncontextmenu', `contextMenu(${count})`);
    container.appendChild(newColor);

    var newBtn = document.createElement('div');
    newBtn.id = `remConBtn${count}`;
    newBtn.className = `btnc-${count} remConBtn`;
    newBtn.setAttribute('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);

    var newUl = document.createElement('ul');
    newUl.id = `remConMen${count}`;
    newUl.className = `dropdown-menu dmnc-${count}`;
    containe.appendChild(newUl);

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

    var newA = document.createElement('a');
    newA.className = 'dropdown-item text-danger';
    newA.innerHTML = `<i class="bi bi-trash3"></i> Eliminar`;
    newA.setAttribute('onclick', `removeColor(${count})`);
    newLi.appendChild(newA);
  }

  function contextMenu(count) {
    event.preventDefault();
    var remConMen = document.getElementById(`remConMen${count}`);
    remConMen.style.display = 'block';
    remConMen.style.left = event.clientX + 'px';
    remConMen.style.top = event.clientY + 'px';
  }

  function removeColor(count) {
    var colorInput = document.querySelector('.colao-' + count);
    if (colorInput) {
      colorInput.remove();
      var remConMen = document.getElementById(`remConMen${count}`);
      remConMen.style.display = 'none';
    }
  }

  document.addEventListener('click', function(event) {
    for (var i = 1; i <= count; i++) {
      var remConMen = document.getElementById(`remConMen${i}`);
      if (remConMen && event.target !== remConMen && !remConMen.contains(event.target)) {
        remConMen.style.display = 'none';
      }
    }
  });

#remConBtn{
top: -38px;
  position: relative;
  left: 30px;
  z-index: -100;
  display: initial;
  }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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" oncontextmenu="contextMenu(1)" type="color"/>
</div>

<div id="Containerdp">
  <div id="remConBtn1" 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" id="remConMen1">
    <li><a class="dropdown-item text-danger" onclick="removeColor(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>

此修改应该通过为每个颜色选择器及其关联的下拉菜单使用唯一的 ID 来解决该问题。请尝试一下，如果它符合您的期望，请告诉我。