javascript: Unable to delete some elements of an array

Question

I want to delete some elements of an array by using data-object-id attribute. But when I use it, the loop does not run as expected. It seems like it jumps over an element every time.

var banIds = ["111", "222", "333"];
function toggle_visibility(className) {
  var elements = document.getElementsByClassName(className),
    n = elements.length;
  for (var i = 0; i < n; i++) {
    var e = elements[i];
    var statusID = e.getAttribute('data-object-id');
    if ($.inArray(statusID, banIds) !== -1) {
      e.remove();
    }
  }
}

What's the problem? And how do I solve it ?

The problem is that document.getElementsByClassName(...) returns HTMLCollection - array like object, but not an array ... So it is updated dynamically while you are deleting your elements. — Bogdan Savluk
– Bogdan Savluk, Commented Jun 15, 2014 at 8:27
@BogdanSavluk, then How should I fix this? Using jquery instead? — ZK Zhao
– ZK Zhao, Commented Jun 15, 2014 at 8:28
@cqcn1991: check the answers then. There is one that proposes tiny jquery-based solution — zerkms
– zerkms, Commented Jun 15, 2014 at 8:30

zerkms · Accepted Answer · 2014-06-15 08:26:12Z

3

As soon as jQuery is acceptable there is no reason to not use its facilities:

function toggle_visibility(className) {
    $('.' + className).filter(function() {
        return $.inArray($(this).data('object-id'), banIds) !== -1;
    }).remove();
}

answered Jun 15, 2014 at 8:26

zerkms

256k73 gold badges447 silver badges551 bronze badges

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

2 Comments

zerkms Over a year ago

@cqcn1991: why did you change my code to use .each()? jsfiddle.net/6D6Ly/1 - this is the code that works

ZK Zhao Over a year ago

I'm not quite familiar with filter, so I change to each making it easier to understand for me. But I'm not sure I get it right.

CnapoB · Accepted Answer · 2014-06-15 08:18:47Z

2

Use while cycle for delete. For cycle skips elements, because they already deleted and other elements have another position index in array.

Or write like this:

if ($.inArray(statusID, banIds) !== -1) {
    e.remove();
    i--;
}

And don't use n, because elements.length changes in cycle.

answered Jun 15, 2014 at 8:18

CnapoB

6751 gold badge9 silver badges16 bronze badges

Comments

VitaliyG · Accepted Answer · 2014-06-15 09:05:55Z

0

This is typical error when deleting elements from indexed list.
You are missing fact that when element is deleted all elements after deleted are shifted in index to index-1. So the next element receives same index as deleted one but for loop still increments index and skips one element after deleted.
Simplest way to avoid this problem is to run loop backward:

  for (var i = n-1; i >= 0; i--) {
    var e = elements[i];
    var statusID = e.getAttribute('data-object-id');
    if ($.inArray(statusID, banIds) !== -1) {
      e.remove();
    }

answered Jun 15, 2014 at 9:05

VitaliyG

1,8571 gold badge11 silver badges11 bronze badges

Collectives™ on Stack Overflow

javascript: Unable to delete some elements of an array

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related