Why am I unable to delete objects (JavaScript)?

Question

I've got the below code and I can't seem to find a way to remove the mainThumbs from the thumbs object. I've tried with splice(0,(mainThumbs.length - 1)), shift, delete thumbs[0] and nothing seems to work. The functions render the following error 'Uncaught TypeError: thumbs.shift() is not a function' while the delete thumbs[0] just returns the thumbs whole and untouched.

var thumbs      = document.querySelectorAll('.thumbnail');
var mainThumbs  = document.querySelectorAll('.main-thumbnail');

for(var i = 0; i < mainThumbs.length; i++){
    delete thumbs[0];

    console.log(thumbs);
}

This is how mainThumbs looks like:

(3) [div.thumbnail.main-thumbnail, div.thumbnail.main-thumbnail, div.thumbnail.main-thumbnail]

This is what the console outputs for thumbs:

(12) [div.thumbnail.main-thumbnail, div.thumbnail.main-thumbnail, div.thumbnail.main-thumbnail, div.thumbnail.modal-open, div.thumbnail, div.thumbnail, div.thumbnail, div.thumbnail, div.thumbnail, div.thumbnail, div.thumbnail, div.thumbnail]

and the typeOf thumbs and mainThumbs is object

Can anyone explain why I can't seem to be able to remove the mainThumbs from the thumbs object? I would also like a solution with splice rather than delete or shift as I find it to be more accurate.

Both then above console outputs are array notation. Arraylike objects that are returned by the querySelectorAll function. They can be turned into an array using [].slice.apply(res). Then use element.parentNode.removeChild(element); — John Rodney
– John Rodney, Commented Dec 8, 2017 at 11:19

Quentin · Accepted Answer · 2017-12-08 11:18:32Z

2

document.querySelectorAll does not return an array. In some ways the object is array-like, but not in all.

Your approach to this problem is over-complicated though. Instead of getting all the elements that are .thumbnail and then trying to remove the ones which are .main-thumbnail, just make one search using the negation pseudo-class:

var non_main_thumbs = document.querySelectorAll('.thumbnail:not(.main-thumbnail)');

answered Dec 8, 2017 at 11:18

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

fluffehStack Over a year ago

I wasn't aware of the possibility of negating in a search. THANKS A LOT MAN!

Arjun Chaudhary · Accepted Answer · 2017-12-13 06:51:44Z

1

querySelectorAll('.thumbnail')

Returns collection not array.
But you can borrow slice method from Array object and create your own real array:

var thumbs      = document.querySelectorAll('.thumbnail');
var mainThumbs  = document.querySelectorAll('.main-thumbnail');

var thumbsArr = Array.prototype.slice.call(thumbs);
var mainThumbsArr = Array.prototype.slice.call(mainThumbs);

for(var i = 0; i < mainThumbsArr.length; i++){
    delete thumbsArr[0];
    console.log(thumbsArr);
}

edited Dec 13, 2017 at 6:51

Arjun Chaudhary

2,4632 gold badges23 silver badges38 bronze badges

answered Dec 13, 2017 at 5:23

user9092125

Collectives™ on Stack Overflow

Why am I unable to delete objects (JavaScript)?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related