从数组中删除 DOM 元素

Question

我必须在我的数组中推送一些 Dom 元素，有时还要从数组中删除它们。

这是我在做什么：

var myDOMS = new Array();
myDOMS.push($("#myDiv"));

var element_to_remove = $("#myDiv");
var index = $.inArray(element_to_remove, myDOMS);
if (index > -1) {
  myDOMS.splice(index, 1);
}

关于删除的部分不起作用。 你知道我做错了什么吗？ 有可能吗？

Answer 1

每次评估$("#myDiv")您都会得到一个新对象。 所以这永远不是真的：

$("#myDiv") === $("#myDiv")

如果你想这样工作，你真的应该使用 DOM 元素引用。 像这样的东西：

var myDOMS = new Array();
myDOMS.push($("#myDiv").get(0));

var element_to_remove = $("#myDiv").get(0);
var index = $.inArray(element_to_remove, myDOMS);
console.log(index);
if (index > -1) {
  myDOMS.splice(index, 1);
}

Answer 2

首先，纠正一下。

• 您不是在谈论 DOM，而是在谈论 jQuery 集合。 @trincot 提到了这一点。 $(XYZ)您提供一个新对象，其中包含由选择器（ XYZ部分）匹配的所有 DOM 元素的集合。

有了这个，这里是没有jQuery并发症的解决方案：

 var elements = []; //prefer literal constructor over "new Array();" for brevity elements.push(document.getElementById("myDiv")); var element_to_remove = document.getElementById("myDiv"); var index = elements.indexOf(element_to_remove); console.log("element index: "+index); if(index !== -1){ //element was present in the array elements.splice(index,1); }

 <div id="myDiv"></div>

Answer 3

因此，您遇到的问题是，当您使用 jQuery 选择器时，您会创建一个唯一的 jQuery 对象（或对象集合，如果有多个），其中包含有关匹配元素的一堆信息，包括引用到 DOM 元素本身（第一部分信息，可通过$("#someElement")[0]引用

由于这些对象是唯一的，虽然它们可能包含有关返回元素的相同信息，但对象本身并不相等。 所以，对于：

var bodyRef1 = $("body");
var bodyRef2 = $("body");
var bodyRef3 = $("body");

你会发现对象中包含的值都是相等的：

bodyRef1[0] === bodyRef2[0] === bodyRef3[0]
bodyRef1.context === bodyRef2.context === bodyRef3.context
etc. . . .

对象本身不是

bodyRef1 !== bodyRef2 !== bodyRef3

在您的情况下，除非有特定原因需要以 jQuery 格式选择元素，否则您实际上最好只执行本机 JavaScript 选择，并消除额外的复杂层：

var myDOMS = new Array();
myDOMS.push(document.getElementById("myDiv"));

var element_to_remove = document.getElementById("myDiv");
var index = $.inArray(element_to_remove, myDOMS);
if (index > -1) {
  myDOMS.splice(index, 1);
}

这是有效的，因为原生 JS 选择只返回对 DOM 元素的引用。