Javascript 从nodelist jquery中删除节点

假设：

（“.class”）

返回一个

节点列表

我有一个网格

div

，有五个子

div

s，它们都有

按钮

s。单击

按钮

时，应展开

div

，其他按钮将应用一些其他样式。要展开的div由

boxToExpand

引用，而

boxtofallinline

应引用其他四个

div

项。然而，我无法做到这一点。我将所有五个元素存储在

boxesToFallInLine

中，然后尝试使用

boxesToFallInLine.remove（boxToExpand）

，但这似乎不起作用。这是我的密码：

让btn=$（'button'）；
btn.on（“单击”，函数（）{
设btnId=$（this.attr（'id'）；
设boxId=boxIdFormat（btnId）；
让boxToExpand=$（“#”+boxId）；//要展开的元素
//要展开的代码被省略
让boxesToFallInLine=$（“.box”）；//所有box元素
boxesToFallInLine.remove（boxToExpand）；//删除已扩展的节点（这似乎不会删除节点）
boxes.ToFallInline.css（“背景”、“蓝色”）；//只是一个测试。所有五个元素现在都是蓝色的
});
//将“box1 btn”转换为“box1”
功能盒IDFormat（btnId）{
返回btnId.split（'-'）[0]；
}

扩大
扩大
扩大

它返回不同内容的原因是jQuery中几乎所有内容都是可链接的，因此所有内容都返回“具有相同基本jQuery API的对象”。因此，如果需要更新项，可以使用

$（“某些查询选择器”）.someFunction（）

如

remove

或

css

等。这与DOM API

HTMLCollection

和

NodeList

形成鲜明对比，它们只是对象，无法将DOM或CSSOM操作链接到它们上

至于您的问题：您正在调用

boxIdFormat（btnId）

，这是一个在

-

上拆分字符串的函数，并且您的HTML没有任何带有连字符的id属性。所以这显然是行不通的

与其通过搞乱字符串然后查询重新组合的字符串来猜测父级，不如直接获取父级：如果有对按钮的引用，则按钮知道其父级是什么。有了这些知识，您可以形成一个jQuery链，该链获取所有框，删除其中带有单击按钮的框（使用），然后修改其余框的css：

$(`button`).click(function() {
  let cbox = $(this).parent();

  // do something with `box` here, like...
  cbox.css(`background`,`inherit`);

  // then update everything else:
  $(".box").not(cbox).css(`background`, `blue`); 
})

完成，不需要猜测工作

---

（也适用于任何试图将其转换为arrow函数的人，如

btn.click（evt=>{…}）

：抵制这种冲动。jQuery需要能够重新绑定事件处理程序的执行上下文（即

此

指向函数内部的内容），而arrow函数不允许并将在没有任何错误或警告的情况下忽略这些内容）

在使用jQuery时，为什么要提到

节点列表？没有涉及
节点列表
。如果粘贴的代码中没有输入错误，则在单词blue之后缺少一个“：“从DOM中删除匹配的元素集”。，
选择器
：”键入：字符串；筛选要删除的匹配元素集的选择器表达式。“-使用
boxesToFallInLine.remove（boxToExpand）
告诉jQuery从
boxesToFallInLine
中删除与选择器
[object]匹配的所有元素
@Andreas它是否返回HTMLCollection？FWIW，您不需要从
此
元素中获取ID并查询具有该ID的元素的DOM，因为它们是相同的。也就是说，
$（此）
与
$（'#'+boxID）
相同。如果您需要用于其他函数的ID，请使用
boxToExpand.attr（'ID'））
。