如何从自定义Select下拉框中删除选中的选项？

你的问题出在自定义下拉框的选项是独立创建的DOM节点，和原生<select>没有绑定自动同步机制，所以只删原生选项，自定义的下拉项不会跟着消失。另外原代码里myFunction还写错了元素ID，把animal写成了favteam，这也是功能失效的原因之一。

下面是修复后的完整代码：

<html>
<style>
body {
background-image:     url('https://images.adsttc.com/media/images/5016/09f4/28ba/0d15/9800/083c/large_jpg/stringio.jpg');
}
    .custom-select {
        position: relative;
        border: 2px solid rgba(255, 255, 255, .2);
        border-radius: 40px;
        text-align: center;
    }

        .custom-select select {
            display: none; 
        }

    .select-selected {
        background-color: transparent;
    }

        .select-selected:after {
            position: absolute;
            content: "";
            right: 10px;
            top: 15px;
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-color: #fff transparent transparent transparent;
        }

        .select-selected.select-arrow-active:after {
            border-color: transparent transparent #fff transparent;
            top: 7px;
        }

    .select-items div, .select-selected {
        color: #ffffff;
        padding: 8px 16px;
        border: 1px solid transparent;
        border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
        cursor: pointer;
        user-select: none;
        border-radius: 40px;
        font-family: "Cinzel", serif;
    }

    .select-items {
        position: absolute;
        background-color: black;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 101;
        border-radius: 20px;
        border: 2px solid rgba(255, 255, 255, .2);
        border-radius: 40px;
        backdrop-filter: blur(5px);
    }

    .select-hide {
        display: none;
    }

    .select-items div:hover, .same-as-selected {
        background-color: rgba(255, 255, 255, 0.2);
    }

</style>
<body>

<div class="custom-select">
  <select id="animal"></select>
</div>

<button onclick="myFunction();">Remove</button>

<script>
let options = ["Select", "Elephant", "Gorilla", "Grizzly Bear", "Lion", "Polar Bear", "Rhino", "Tiger"];

const zoo = document.getElementById("animal");

for (var i = 0; i < options.length; i++) {

var option = document.createElement("option");
option.value = options[i];
option.text = options[i];
zoo.appendChild(option);
}

function myFunction() {
  // 修正元素ID错误
  var zoo = document.getElementById("animal");
  const selectedIndex = zoo.selectedIndex;
  
  // 禁止删除默认的"Select"选项
  if (selectedIndex === 0) return;

  // 删除原生select的选项
  zoo.remove(selectedIndex);

  // 获取自定义下拉容器及相关元素
  const customSelect = zoo.closest('.custom-select');
  const selectItems = customSelect.querySelector('.select-items');
  const selectedDisplay = customSelect.querySelector('.select-selected');
  
  // 删除对应的自定义选项：自定义项从索引1开始创建，所以要减1
  const customOptionToRemove = selectItems.children[selectedIndex - 1];
  if (customOptionToRemove) {
    customOptionToRemove.remove();
  }

  // 如果删除的是当前选中项，恢复显示默认的"Select"并同步原生选中状态
  if (selectedDisplay.textContent === zoo.options[selectedIndex - 1]?.textContent) {
    selectedDisplay.textContent = "Select";
    zoo.selectedIndex = 0;
  }
 }
 </script>

   <script>

    var x, i, j, l, ll, selElmnt, a, b, c;

    x = document.getElementsByClassName("custom-select");
    l = x.length;
    for (i = 0; i < l; i++) {
        selElmnt = x[i].getElementsByTagName("select")[0];
        ll = selElmnt.length;

        a = document.createElement("DIV");
        a.setAttribute("class", "select-selected");
        a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
        x[i].appendChild(a);

        b = document.createElement("DIV");
        b.setAttribute("class", "select-items select-hide");
        for (j = 1; j < ll; j++) {

            c = document.createElement("DIV");
            c.innerHTML = selElmnt.options[j].innerHTML;
            c.addEventListener("click", function (e) {

                var y, i, k, s, h, sl, yl;
                s = this.parentNode.parentNode.getElementsByTagName("select")[0];
                sl = s.length;
                h = this.parentNode.previousSibling;
                for (i = 0; i < sl; i++) {
                    if (s.options[i].innerHTML == this.innerHTML) {
                        s.selectedIndex = i;
                        h.innerHTML = this.innerHTML;
                        y = this.parentNode.getElementsByClassName("same-as-selected");
                        yl = y.length;
                        for (k = 0; k < yl; k++) {
                            y[k].removeAttribute("class");
                        }
                        this.setAttribute("class", "same-as-selected");
                        break;
                    }
                }
                h.click();
            });
            b.appendChild(c);
        }
        x[i].appendChild(b);
        a.addEventListener("click", function (e) {

            e.stopPropagation();
            closeAllSelect(this);
            this.nextSibling.classList.toggle("select-hide");
            this.classList.toggle("select-arrow-active");
        });
    }
    function closeAllSelect(elmnt) {

        var x, y, i, xl, yl, arrNo = [];
        x = document.getElementsByClassName("select-items");
        y = document.getElementsByClassName("select-selected");
        xl = x.length;
        yl = y.length;
        for (i = 0; i < yl; i++) {
            if (elmnt == y[i]) {
                arrNo.push(i)
            } else {
                y[i].classList.remove("select-arrow-active");
            }
        }
        for (i = 0; i < xl; i++) {
            if (arrNo.indexOf(i)) {
                x[i].classList.add("select-hide");
            }
        }
    }

    document.addEventListener("click", closeAllSelect);
</script>
</body>
</html>

关键修改说明 #

1. 修正了myFunction中的元素ID错误，将favteam改为正确的animal
2. 增加自定义选项同步删除逻辑：通过closest('.custom-select')定位容器，根据原生选中索引找到对应自定义项并删除（自定义项从索引1开始创建，所以索引要减1）
3. 添加保护逻辑，防止删除默认的"Select"选项
4. 若删除的是当前选中项，自动恢复显示为"Select"并同步原生select的选中状态

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