Issue with deleting items from array in for loop

Question

So I am having a problem with deleting items from an array while in a for loop

var div = document.querySelector('div');
var array = [
"iPad",
"iPod",
"iPhone"
];

for (let i = 0; i < array.length; i++) {
  let p = document.createElement('p');
  p.textContent = array[i];
  div.appendChild(p);

  p.onclick = function() {
    array.splice(array.indexOf(this, 1)); 
    this.remove(); 
    console.log(array);
  }

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
  </head>
  <body>
    
    <div>
      
    </div>
    
  </body>
</html>

So the problem is that when I click on an item to delete it, it doesn't delete that specific one. No matter which one I click on, it deletes starting from the bottom ("iPhone" to "iPod" to "iPad").

Visually, it deletes the right one but when I go to the console I can see that it deletes from the bottom up. Any help would be so very much appreciated.

provided link is not working

Syed Daniyal Asif
– Syed Daniyal Asif

2017-07-07 06:42:53 +00:00
Commented Jul 7, 2017 at 6:42 — Syed Daniyal Asif
– Syed Daniyal Asif, Commented Jul 7, 2017 at 6:42
@SyedDaniyalAsif The cake is a lie

DarkBee
– DarkBee

2017-07-07 06:52:29 +00:00
Commented Jul 7, 2017 at 6:52 — DarkBee
– DarkBee, Commented Jul 7, 2017 at 6:52

Fini Yang · Accepted Answer · 2017-07-07 06:50:51Z

1

for (let i = 0; i < array.length; i++) {
  let p = document.createElement('p'),
      a = array[i];
  p.textContent = a;
  div.appendChild(p);

  p.onclick = function() {
    array.splice(array.indexOf(a),1); 
    this.remove(); 
    console.log(array);
  }
}

answered Jul 7, 2017 at 6:50

Fini Yang

263 bronze badges

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

Comments

Dij · Accepted Answer · 2017-07-07 06:53:23Z

you are using array.splice(array.indexOf(this, 1)) wrong, this gives you the clicked element where as array contains text inside that element, you need to do something like this:

var div = document.querySelector('div');
var array = [
"iPad",
"iPod",
"iPhone"
];

for (let i = 0; i < array.length; i++) {
  let p = document.createElement('p');
  p.textContent = array[i];
  div.appendChild(p);

  p.onclick = function() {
    array.splice(array.indexOf(this.innerHTML),1); 
    this.remove(); 
    console.log(array);
  }

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
  </head>
  <body>
    
    <div>
      
    </div>
    
  </body>
</html>

dRoyson · Accepted Answer · 2017-07-07 06:54:50Z

0

In the onclick function make the following changes.

p.onclick = function() {
    array.splice(array.indexOf(this.textContent),1); 
    this.remove(); 
    console.log(array);
  }

answered Jul 7, 2017 at 6:54

dRoyson

1,5173 gold badges14 silver badges25 bronze badges

Comments

Lalit Sachdeva · Accepted Answer · 2017-07-07 07:18:47Z

0

please have a look of this to this.innerHTML

var div = document.querySelector('div');
var array = [
"iPad",
"iPod",
"iPhone"
];

for (let i = 0; i < array.length; i++) {
  let p = document.createElement('p');
  p.textContent = array[i];
  div.appendChild(p);

  p.onclick = function() {
array.splice(array.indexOf(this.innerHTML), 1); 
this.remove(); 
console.log(array);
  }

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
  </head>
  <body>
    
    <div>
      
    </div>
    
  </body>
</html>

answered Jul 7, 2017 at 7:18

Lalit Sachdeva

6,6612 gold badges22 silver badges25 bronze badges

Collectives™ on Stack Overflow

Issue with deleting items from array in for loop

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related