Question

所以我在for循环中删除数组中的项目时遇到问题

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>

所以问题是当我点击一个项目来删除它时，它不会删除那个特定的项目。无论我点击哪一个，它都会从底部（“iPhone”到“iPod”到“iPad”）删除。

在视觉上，它删除了正确的一个但是当我进入控制台时，我可以看到它从下往上删除。任何帮助都会非常感激。

Answer 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);
  }
}

Answer 2

您正在使用array.splice(array.indexOf(this, 1))错误，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>

Answer 3

在onclick功能中进行以下更改。

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

Answer 4

请查看this到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>

在for循环中从数组中删除项目的问题

4 个答案: