There seems to be an issue with deleting elements from an array within 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>
It appears that when clicking to delete an item from the array, it deletes items in reverse order. The deletion starts from the last item and works its way up. Any assistance on how to resolve this would be greatly appreciated.