Deleting from array javascript

Question

I am looping through an array and displaying it on the screen. I have a problem, though. I tried to add a function that when you click on the text, it deletes that clicked text. Here is my code:

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

When I click on it, it deletes the item from the array and logs it to the console. But it doesn't show on the screen. Any help?

Thank you, Scratch Cat

• Quentin: Why would it? You don't touch the paragraph element object.
• Liquidchrome: you need to replace the contents of the "p" with the new array after deletion
• Jonas Wilms: Isnt it array.splice(i,1); ?
• Scratch Cat: Yes I know that but it doesn't work, it just deletes the last iteration.

Answer 1

You seem to be close. You have removed the element from the array but not from the DOM, that is the reason why you cannot see the updated in the 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);
}
}

• Jonas Wilms: you may hit the green checkmark somewhere as this queston is solved. however, taking over my comment in line two does not make sense (var is function scoping...)

Answer 2

Here you go:

var div = document.querySelector('div');
var array = [
"Banana",
"Chocolate",
"Oranges"
];
for (let i = 0; i < array.length; i++) {
 let p = document.createElement('p'); //note the block scoping
 p.textContent = array[i];
 div.appendChild(p);
 p.onclick = function() {
 array.splice(array.indexOf(this), 1); //splice wants an index...
 this.remove(); //remove el from document tree
 console.log(array);
 }
}

https://jsfiddle.net/wt0fux3f/6/

• Scratch Cat: Don't worry I've fixed it. instead of using p.remove() I used this.remove(). Thank you.
• user5096599: @ScratchCat I have updated the code to reflect that change as well as a few others. I removed the variable that was grabbing the text content and just used 'this' as well.

Answer 3

for(let i = 0; i < array.length; i++){
let p = document.createElement('p');//note the block scoping
p.textContent = array[i];
div.appendChild(p);
p.onclick = function(){
 array.splice(i, 1);//splice wants an index...
 p.remove();//remove el from document tree
 console.log(array);
}
}

You may also want to remove the html element?

• Scratch Cat: Yes I tried removing the paragraph but it didn't work. It just removed the last iteration.
• Jonas Wilms: @Scratch Cat note line two... when using p.remove() its important that p is blockscoped. You could also use this.remove() instead, then it doesnt matter....