时间戳

首页 > 解决方案 > 如何按类定位列表元素内的项目？

javascript - 如何按类定位列表元素内的项目？

问题描述

假设我们有一个<ol>id #ol1 并且我们<li>使用 append 方法在其中生成项目，并且这些 li 包含一个输入和一个按钮。

有没有办法通过索引号来定位特定的列表项，比如document.querySelectorAll('#ol1 li')[3]获取第 4 个 li (0,1,2,3) 元素，然后按类在其中选择一个项目？

如果我们选择按钮，class=remove我们如何定位它所在的容器并使用someselector.remove()它来删除它而无需使用 id，那么基本上我们的删除函数如何知道<li>要删除哪个？（图片解释）？

我正在寻找一个纯 javascript 解决方案，但是如果您建议使用 jquery 的内容，请同时包含 js 逻辑。

在此处输入图像描述

*msg to mods：我打开了一个新问题，因为编辑前一个问题会显着改变主题。

function append() {

  var index = document.getElementById("ol1").getElementsByTagName("li").length;


  var ol = document.getElementById("ol1");
  var li = document.createElement("li");


  li.innerHTML = (`LIST ITEM <input class=input  value=this&nbsp;is&nbsp;list&nbsp;item&nbsp;number&nbsp;${index}><button class=remove>REMOVE</button>`);
  ol.append(li)
}
<html>

<body>
  <button id="btn1" onclick="append()">Append</button>
  <ol id="ol1">
  </ol>
</body>

</html>

标签： javascripthtmlcss

解决方案

要回答您的问题，您可以使用 nth-child 或ol.querySelectorAll('li')[idx]

但是你真的想在 OL 上使用 eventListener 和最接近的方法

function append() {
  var index = document.getElementById("ol1").getElementsByTagName("li").length;
  var ol = document.getElementById("ol1");
  var li = document.createElement("li");
  li.innerHTML = (`LIST ITEM <input class=input  value=this&nbsp;is&nbsp;list&nbsp;item&nbsp;number&nbsp;${index}><button class=remove>REMOVE</button>`);
  ol.append(li)
}
document.getElementById("ol1").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("remove")) tgt.closest("li").remove();
})
<html>

<body>
  <button id="btn1" onclick="append()">Append</button>
  <ol id="ol1">
  </ol>
</body>

</html>

推荐阅读