Удаление из массива JavaScript

Question

Удаление из массива JavaScript

1

Я перебираю массив и показываю его на экране. У меня есть проблема. Я попытался добавить функцию, которая при нажатии на текст удаляет текст с щелчком. Вот мой код:

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

}

Когда я нажимаю на него, он удаляет элемент из массива и записывает его в консоль. Но он не отображается на экране. Любая помощь?

Спасибо, Scratch Cat

Scratch Cat 07 июнь 2017, в 22:49

Источник

Теги:

javascript

3 ответа

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

}

Scratch Cat 07 июнь 2017, в 18:08

0

Вы можете нажать зеленую галочку где-нибудь, когда этот квест решен. однако, принятие моего комментария во второй строке не имеет смысла (var - функция scoping ...)
Jonas Wilms 08 июнь 2017, в 04:57

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

}

Вы также можете удалить элемент html?

Jonas Wilms 07 июнь 2017, в 18:58

0

Да, я пытался удалить абзац, но это не сработало. Он только что удалил последнюю итерацию.
Scratch Cat 07 июнь 2017, в 20:19
0

@ Scratch Cat, обратите внимание на вторую строку ... при использовании p.remove () важно, чтобы p был ограничен. Вы также можете использовать this.remove (), тогда это не имеет значения ....
Jonas Wilms 07 июнь 2017, в 20:19

Ещё вопросы

Вы можете нажать зеленую галочку где-нибудь, когда этот квест решен. однако, принятие моего комментария во второй строке не имеет смысла (var - функция scoping ...)
Да, я пытался удалить абзац, но это не сработало. Он только что удалил последнюю итерацию.
@ Scratch Cat, обратите внимание на вторую строку ... при использовании p.remove () важно, чтобы p был ограничен. Вы также можете использовать this.remove (), тогда это не имеет значения ....

Mike · Accepted Answer · 2017-06-07T18-27-00.000Z

Ну вот:

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/

Не волнуйся, я это исправил. вместо использования p.remove () я использовал this.remove (). Спасибо.
@ ScratchCat Я обновил код, чтобы отразить это изменение, а также некоторые другие. Я удалил переменную, которая захватывает текстовое содержимое, и просто использовал «this».