Question

我有一个数组并将其内容显示在主体上的P标记中，现在当我点击特定元素时如何删除该元素。

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

   }
}

Answer 1

使用数组方法 - 不要将var与异步代码一起使用，因为它会被提升并具有函数范围而不是块范围。

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>

我建议避免getElementsByClassName。 getElementsBy *方法返回HTMLCollections，这可能很难处理。请考虑使用querySelectorAll，它返回一个静态NodeList - 与HTMLCollection不同，它可以直接迭代，在迭代时不会改变，而且它更灵活。

Answer 2

修改你的代码，我想出了这个：

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>

Answer 3

这是你能做的。

＆＃13;

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

＆＃13;

<div id='demo'>
</div>

＆＃13;

无法删除onclick事件上的随机数组元素

3 个答案: