J'ai un tableau et affiche son contenu enveloppé dans une balise P sur le corps, maintenant comment supprimer l'élément lorsque je clique sur l'élément spécifique.

JS:

var arr = [10, 20, 30];

var demo = document.getElementById('demo');
for( var i = 0; i < arr.length; i++) {
 demo.innerHTML += `<p class="tag">${arr[i]} </p>`;
 }

 var pTag = document.getElementsByClassName("tag");
 for( var j = 0; j < pTag.length; j++) {
  pTag[j].onclick = function() {
    arr.splice(pTag[j], 1);

   }
}
0
ankitjt 17 avril 2018 à 08:36

3 réponses

Meilleure réponse

Utilisez plutôt des méthodes de tableau - n'utilisez pas var avec du code asynchrone, car il est hissé et a une portée de fonction au lieu d'une portée de bloc.

const arr = [10, 20, 30, 40, 50];
const demo = document.getElementById('demo');
arr.forEach(num => {
  const p = demo.appendChild(document.createElement('p'));
  p.textContent = num;
  p.addEventListener('click', () => {
    arr.splice(arr.indexOf(num), 1);
    p.remove();
    console.log('now have ' + JSON.stringify(arr));
  });
});
<div id="demo">

</div>

Je recommanderais d'éviter getElementsByClassName. Les méthodes getElementsBy * renvoient HTMLCollections, ce qui peut être difficile à utiliser. Envisagez plutôt d'utiliser querySelectorAll, qui retourne une NodeList statique - contrairement à HTMLCollection, il peut être itéré directement, il ne changera pas pendant qu'il est itéré, et il est beaucoup plus flexible.

1
CertainPerformance 17 avril 2018 à 05:41

Voici ce que vous pourriez faire.

var arr = [10, 20, 30];

var demo = document.querySelector('#demo');
for (var i = 0; i < arr.length; i++) {
  demo.innerHTML += `<p class="tag">${arr[i]} </p>`;
}

demo.addEventListener('click', function(event) {
  event.target.remove();
});
<div id='demo'>
</div>
0
Sreekanth 17 avril 2018 à 05:50

En modifiant votre code, j'ai trouvé ceci:

var arr = [10, 20, 30];

var demo = document.getElementById('demo');
for (var i = 0; i < arr.length; i++) {
  demo.innerHTML += `<p class="tag">${arr[i]} </p>`;
}

var pTag = document.getElementsByClassName("tag");
for (var j = 0; j < pTag.length; j++) {
  pTag[j].onclick = function() {
    console.log(this.innerText);
    this.remove();
    var num = parseInt(this.innerText);
    arr.splice(arr.indexOf(num), 1);
    console.log(arr)
  }
}
<div id="demo">

</div>
0
Sachi Tekina 17 avril 2018 à 06:06