javascript - 如何删除特定列表值之后的所有元素？

Question

我有一个列表-

<ol>
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
<li>Value 4</li>
<li>Value 5</li>
</ol>

如何在用户单击特定值后删除所有列表值，例如:如果用户单击了 Value 3，我希望能够保留 Value 1, Values 2 和值 3 并删除其余部分。我试过 findIndex() 找到点击列表的索引位置，然后 splice() 列表，因为列表也有索引，但它不起作用。有什么建议吗？

Answer 1

遍历每个 li 并绑定(bind)点击事件。在点击事件中使用 this 点击 li。我们可以使用 nextElementSibling 获取下一个元素。所以循环 unitl 下一个元素兄弟是可用的 & 删除它。

在下面试试。

document.querySelectorAll('li').forEach(x => x.addEventListener('click', function() {
  let li = this;
  // loop unitl next element sibling is available.
  while (li.nextElementSibling) {
    // remove next element
    li.nextElementSibling.remove();
  }
}))

<ol>
  <li>Value 1</li>
  <li>Value 2</li>
  <li>Value 3</li>
  <li>Value 4</li>
  <li>Value 5</li>
</ol>

---

编辑 根据@mplungjan in comment的建议您还可以像下面这样从 ol 委托(delegate)事件。在 ol 上定义 click 事件，然后验证 e.target 是否为 li 且条件为 e.target .tagName.toLowerCase() === 'li'。使用 e.target 点击 li。其余逻辑同上。

document.querySelector('ol').addEventListener('click', function(e) {
  if (e.target.tagName.toLowerCase() === 'li') {
    let li = e.target;
    // loop unitl next element sibling is available.
    while (li.nextElementSibling) {
      // remove next element
      li.nextElementSibling.remove();
    }
  }
});

<ol>
  <li>Value 1</li>
  <li>Value 2</li>
  <li>Value 3</li>
  <li>Value 4</li>
  <li>Value 5</li>
</ol>