时间戳

首页 > 解决方案 > 删除带有事件的项目

javascript - 删除带有事件的项目

问题描述

当用户单击下拉菜单上方时，我需要删除除从菜单 ID 中选择值之外的所有项目，为此我做了一个事件。

这是我试过的：

const menu = document.querySelector("#menu");

menu.addEventListener("click", () => {
  let sonsLength = menu.length;

  for (let i = 0; i < sonsLength; i++) {
    if (menu[i].value != "Select") {
      menu.removeChild(menu[i]);
      sonsLength = sonsLength - 1;
    }
  }
})
<select id="menu">
  <option value="Select">Select</option>
  <option value="Madrid">Madrid</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Sevilla">Sevilla</option>
  <option value="Bilbao">Bilbao</option>
  <option value="Manchester">Manchester</option>
  <option value="Paris">Paris</option>
</select>

但是，我的循环并没有按我的预期工作，因为用户需要在下拉菜单上方单击几次才能删除除第一个以外的所有项目，并且由于我的理解，当用户单击一次时应该删除这些项目。

谢谢！

标签： javascriptdom-events

解决方案

我仍然不确定这是否是您想要实现的目标，但也许我是对的？

const menu = document.querySelector("#menu");

menu.addEventListener("change", () => {
  let sonsLength = menu.length;

  for (let i = 0; i < sonsLength;) {
    if (menu[i].value != "Select") {
      menu.removeChild(menu[i]);
      sonsLength = sonsLength - 1;
    }
    else
        i++;
  }
})
<select id="menu">
  <option value="Select">Select</option>
  <option value="Madrid">Madrid</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Sevilla">Sevilla</option>
  <option value="Bilbao">Bilbao</option>
  <option value="Manchester">Manchester</option>
  <option value="Paris">Paris</option>
</select>

回答你关于 for 循环中 else 的问题：

如果删除数组中的一项，则所有其他项索引都会向前移动一个位置。例如

你有一个数组

[0, 1, 2]

现在值 0 在索引 0 处，值 1 在索引 1 处，值 2 在索引 2 处。

当你现在删除你得到的第一个元素

[1, 2]

所以现在值 1 在索引 0 处，值 2 在索引 1 处。

对于我的循环，这意味着，如果从数组中删除一个元素，则不能增加索引 (i)，因为所有其他元素都移动到实际索引 (i)。只有当我离开一个元素时，我才必须增加索引才能到达下一个元素

推荐阅读