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

you need to replace the contents of the "p" with the new array after deletion — Liquidchrome
– Liquidchrome, Commented Jun 7, 2017 at 20:12
Yes I know that but it doesn't work, it just deletes the last iteration. — Scratch Cat
– Scratch Cat, Commented Jun 7, 2017 at 20:20

Dipesh KC · Accepted Answer · 2017-06-08 03:10:53Z

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

}

edited Jun 8, 2017 at 3:10

Dipesh KC

3,3173 gold badges35 silver badges50 bronze badges

answered Jun 7, 2017 at 20:35

Scratch Cat

599 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jonas Wilms Over a year ago

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...)

score 1 · Accepted Answer · 2017-06-08 13:26:04Z

1

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/

edited Jun 8, 2017 at 13:26

answered Jun 7, 2017 at 20:24

user5096599

2 Comments

Scratch Cat Over a year ago

Don't worry I've fixed it. instead of using p.remove() I used this.remove(). Thank you.

user5096599 Over a year ago

@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.

Jonas Wilms · Accepted Answer · 2017-06-07 20:15:56Z

0

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?

answered Jun 7, 2017 at 20:15

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

2 Comments

Scratch Cat Over a year ago

Yes I tried removing the paragraph but it didn't work. It just removed the last iteration.

Jonas Wilms Over a year ago

@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....

Collectives™ on Stack Overflow

Deleting from array javascript

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related