Remove DOM element from array

Question

I have to push in my array some Dom elements, and sometimes, to remove then from the array.

Here is what i'm doing:

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);
}

The part about removing doesn't work. Do you know what I'm doing wrong? Is it possible?

What you're doing is possible, you can match elements by their id, however this seems like an X/Y question, as I'm not sure why you want to do this, but I am almost certain there's a better way to achieve what you need. — Rory McCrossan
– Rory McCrossan, Commented Feb 7, 2018 at 15:54
removing element from array won't remove it from DOM just to point that out — sumeet kumar
– sumeet kumar, Commented Feb 7, 2018 at 15:55
Thank you for your anwser. Actually I wrote $("#myDiv") but it could be $(".myDiv").. — user3013440
– user3013440, Commented Feb 7, 2018 at 15:57
@sumeetkumar Yes I know, thank you, I just want to remove it from the array — user3013440
– user3013440, Commented Feb 7, 2018 at 15:57
You're trying to match jQuery objects by reference; that's not going to work. — Heretic Monkey
– Heretic Monkey, Commented Feb 7, 2018 at 15:57

trincot · Accepted Answer · 2018-02-07 16:00:01Z

4

Every time you evaluate $("#myDiv") you will get a new object back. So this is never true:

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

If you want to work like this, you should really use the DOM element references. Something like this:

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);
}

answered Feb 7, 2018 at 16:00

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

travnik · Accepted Answer · 2018-02-07 16:12:12Z

1

First of all, a correction.

you are not talking about DOM, you are talking about jQuery collections. @trincot mentioned this. $(XYZ) gets you a new object that contains a collection of all DOM elements matched by the selector (the XYZ part).

with that, here is the solution without jQuery complications:

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>

answered Feb 7, 2018 at 16:12

travnik

7307 silver badges19 bronze badges

Comments

talemyn · Accepted Answer · 2018-02-07 16:19:26Z

So the issue that you are having is that when you use a jQuery selector, you create a unique jQuery object (or collection of objects, if there is more than one), that contains a bunch of information about the matching element, including a reference to the DOM element itself (the first bit of information, referenceable by $("#someElement")[0]

Since these objects are unique, while they may contain identical information about the returned element, the objects themselves are not equal. So, for:

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

You will find that the values contained in the object are all equal:

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

The objects themselves are not

bodyRef1 !== bodyRef2 !== bodyRef3

In your case, unless there is a specific reason why you need to have the elements selected in a jQuery format, you might actually be better off simply doing a native JavaScript selection, and remove the extra layer of complexity:

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);
}

This works because the native JS selection returns only a reference to the DOM element.

Collectives™ on Stack Overflow

Remove DOM element from array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related