問題與刪除從數組項在for循環

所以我有，而在從數組刪除項目的一個問題for循環問題與刪除從數組項在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」）。

可見，它刪除了正確的一個，但是當我去控制檯時，我可以看到它從底部刪除。任何幫助將非常感激。

來源

2017-07-07 Scratch Cat

提供的鏈接無法正常工作 –

@SyedDaniyalAsif蛋糕是一個謊言 – DarkBee

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

來源

2017-07-07 06:50:51

您使用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>

來源

2017-07-07 06:53:23 Dij

在onclick函數中進行以下更改。

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

來源

2017-07-07 06:54:50

請看看的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>

來源

2017-07-07 07:18:47

問題與刪除從數組項在for循環

回答

相關問題