javascript - 从数组javascript中删除

Question

我正在遍历一个数组并将其显示在屏幕上。不过我有个问题。我试图添加一个功能，当你点击文本时，它会删除点击的文本。这是我的代码:

var div = document.querySelector('div');
var array = [
"Banana",
"Chocolate",
"Oranges"
];

for(let i = 0; i < array.length; i++){

var p = document.createElement('p');
p.textContent = array[i];
div.appendChild(p);

p.onclick = function(){

    array.splice(array[i], 1);
    console.log(array);
}

}

当我点击它时，它会从数组中删除项目并将其记录到控制台。但它没有显示在屏幕上。有帮助吗？

谢谢，抓挠猫

Answer 1

你看起来很亲近。您已经从数组中删除了元素，但没有从 DOM 中删除，这就是为什么您在 html 中看不到更新的原因。

for(let i = 0; i < array.length; i++){
var p = document.createElement('p');//note the block scoping
p.textContent = array[i];
div.appendChild(p);

p.onclick = function(){
    array.splice(i, 1);
    this.remove();//also remove from the DOM
    console.log(array);
}

}