Javascript 如何按类将列表元素中的项作为目标？

假设我们有一个id为ol1的，我们使用append方法在其中生成项目，这些li包含一个输入和一个按钮

是否有一种方法可以通过索引号（如document.querySelectorAll'ol1 li'[3]将特定列表项作为目标，以获取第4个li 0,1,2,3元素，然后按类选择其中的一个项

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

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

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

函数附加{ var index=document.getElementByIdol1.getElementsByTagNameli.length； var ol=document.getElementByIdol1； var li=document.createElementli； li.innerHTML=`LIST ITEM REMOVE`； 阿佩德利酒店 } 追加 有没有一种方法可以通过索引指向特定的列表项

是-：第n个孩子，所以：

请记住：第n个子元素是1索引的，而不是0-，即第一个元素位于索引1，而不是0

如果我们选择class=remove的按钮，我们如何定位它所在的容器

满足最近值，它在DOM中从特定元素向上导航，直到满足某个选择器条件

someElement.closest('.foo'); //<-- returns the nearest parent/ancestor with .foo

---

要回答您的问题，您可以使用n个child或ol.queryselector all'li'[idx]

但是您确实希望在OL和方法上使用eventListener

函数附加{ var index=document.getElementByIdol1.getElementsByTagNameli.length； var ol=document.getElementByIdol1； var li=document.createElementli； li.innerHTML=`LIST ITEM REMOVE`； 阿佩德利酒店 } document.getElementByIdol1.addEventListenerclick，函数E{ 常数tgt=e.target； 如果tgt.classList.contains删除tgt.closestli.remove； } 追加

---

请尝试document.querySelector“ol1”。查询选择all'li'[3]

是否有一种方法可以通过索引号（如document.querySelectorAll'ol1 li'[3]将特定列表项作为目标，以获取第4个li 0,1,2,3元素，然后按类选择其中的一个项

如果这意味着您希望始终获取由“ol1 li”选择的所有元素集合中的第四项

使用CSS是不可能的：

CSS的工作原理如下：选择器的所有部分都必须匹配元素才能应用规则

.some class:n-child4的意思是：它必须有某个类的类，并且必须是其父类的第四个子类。如果文档中有100个（即：深度嵌套的项）且两个条件均为true，则所有100个项都将应用规则

这是因为CSS在对元素应用规则时没有集合的概念。对于DOM中的每个元素，它都要经过CSSOM中的每个选择器。如果选择器应用于当前元素，则将应用指定的规则。然后它移动到下一个DOM元素

使用JavaScript：

使用JQuery：

注意：在jQuery中，您需要使用.is检查返回的结果是否是实际的DOM元素，因为没有匹配项的返回值仍然是一个函数，这会导致一些微妙的错误。

按类确定目标的另一种方法是访问被单击按钮的parentNode

对于每个button.remove，我们可以附加一个onclick事件侦听器，该侦听器触发以下函数：

const removeListItem = (event) => {

  const listItem = event.target.parentNode; // <= This is just the parentNode of the button
  ol1.removeChild(listItem);
}

追加

const element = [...document.querySelectorAll('.some-class')][3]; // 0 indexed
if (element) {
  // first match of .other-class inside `element`:
  element.querySelector('.other-class') // first match

  // 4th .other-class inside 4th .some-class:
  [...element.querySelectorAll('.other-class')][3] 
 }

const $el = $('.some-class'):eq(3); // 0 indexed, also
if ($el.is('.some-class')) {
  // collection of all `.other-class` elements inside `$el`:
  $('.other-class', $el)
}

const removeListItem = (event) => {

  const listItem = event.target.parentNode; // <= This is just the parentNode of the button
  ol1.removeChild(listItem);
}