Moving element from one array into another

Question

I've tried to make the following Stackblitz which use ng2-dragula. My problem laid in the moveback() and moveto() function which are supposed to move from one array into another when the element was selected. I was able to detect which element was selected but unable to move them completely (some element was left over).

Related Code:

  moveback() {
    let target = document.getElementsByClassName('target');
    for (let i = 0; i < target.length; i++) {
      if (target[i].className.includes('ex-over')) {
        this.removeClass(target[i], 'ex-over');
        this.data.push({ name: target[i].innerHTML });
        this.target.splice(i, 1);
      }
    }
  }

  moveto() {
    let target = document.getElementsByClassName('data');
    for (let i = 0; i < target.length; i++) {
      if (target[i].className.includes('ex-over')) {
        this.removeClass(target[i], 'ex-over');
        this.target.push({ name: target[i].innerHTML });
        this.data.splice(i, 1);
      }
    }
  }

I've found two related(1), related(2) question which asks similar thing but it's not working in my case. My approach was detecting either the element contains a certain class name then remove the class and move them to another array and remove it from the original array. But it's not working like intended.

Answer 1

Update your for condition as below.

for (let i = target.length - 1; i >= 0; i--) {...}

The issue with your logic is, If you select 2nd & 3rd element and apply moveto then for 2nd element it will work fine. But then in your actual this.target array will be changed. Now 3rd element will become 2nd because of your line this.target.splice(i, 1);. So when you move 3rd element in for loop iteration, it will actually move 4th one.

Check with Updated fiddle Here