CODEWITHSUNDEEP
javascriptarraysdomjavascript-objects
fluffehStack
fluffehStack

Reputation: 81

Why am I unable to delete objects (JavaScript)?

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.

Upvotes: 1

Views: 44

Answers (2)

user9092125
user9092125

Reputation:

querySelectorAll('.thumbnail')

  1. Returns collection not array.
  2. 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);
}

Upvotes: 1

Quentin
Quentin

Reputation: 944011

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

Upvotes: 2

Related Questions