我有一个数组并将其内容显示在主体上的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);
}
}
答案 0 :(得分: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不同,它可以直接迭代,在迭代时不会改变,而且它更灵活。
答案 1 :(得分:0)
修改你的代码,我想出了这个:
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>
答案 2 :(得分:0)
这是你能做的。
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;