javascript - 如何删除数组的某个项目?
问题描述
数组中有 5 个项目(其中包含对象),它通过根据数组长度在文档中创建一些元素来直观地表示。 像这样:
let array = [
{
"value": "Hello"
},
{
"value": "World"
},
{
"value": "You Can"
},
{
"value": " NOT"
},
{
"value": "<h1>Remove ME!</h1>"
}
]
// creating it visually by creating elements.
for(let i = 0; i < array.length; i++) {
const div = document.createElement("div");
div.classList.add("DIV");
div.innerHTML = `
<span class="Text">${array[i].value}</span>
<span class="Remove">( Remove )</span>
`
document.body.appendChild(div);
}
document.querySelectorAll(".Remove").forEach(elem => {
elem.addEventListener("click", () => {
remove();
})
})
function remove() {
// Now how to remove the specific item from the array?
}
// I hope this is fully understandable.
/* CSS IS NOT VERY IMPORTANT */
.DIV {
padding: 10px;
margin: 10px;
background: purple;
color: #fff;
border-radius: 10px;
display: flex;
justify-content: space-between;
}
.Remove {
cursor: pointer;
height: fit-content;
}
现在我想通过单击第 4 个删除按钮来删除数组中值为“NOT”的第 4 个元素,但我该怎么做。
(您的代码应该适用于所有元素。)
任何帮助将不胜感激。谢谢你。
解决方案
简单来说,添加一个id
或某种标识符并以这种方式使用它。
let array = [
{
"value": "Hello"
},
{
"value": "World"
},
{
"value": "You Can"
},
{
"value": " NOT"
},
{
"value": "<h1>Remove ME!</h1>"
}
]
// creating it visually by creating elements.
for (let i = 0; i < array.length; i++) {
const div = document.createElement("div");
div.classList.add("DIV");
div.innerHTML = `
<span class="Text">${array[i].value}</span>
<span class="Remove" data-id="${"elem-" + i}">( Remove )</span>
`;
document.body.appendChild(div);
}
document.querySelectorAll(".Remove").forEach(elem => {
elem.addEventListener("click", () => {
remove(elem.dataset.id);
})
})
function remove(id) {
// Now how to remove the specific item from the array?
console.log(id);
}
// I hope this is fully understandable.
/* CSS IS NOT VERY IMPORTANT */
.DIV {
padding: 10px;
margin: 10px;
background: purple;
color: #fff;
border-radius: 10px;
display: flex;
justify-content: space-between;
}
.Remove {
cursor: pointer;
height: fit-content;
}
上面的代码现在将获取数据集。使用它,删除那个元素id
并重新渲染视图。
let array = [
{
"value": "Hello"
},
{
"value": "World"
},
{
"value": "You Can"
},
{
"value": " NOT"
},
{
"value": "<h1>Remove ME!</h1>"
}
]
function renderElement(array) {
// creating it visually by creating elements.
for (let i = 0; i < array.length; i++) {
const div = document.createElement("div");
div.classList.add("DIV");
div.innerHTML = `
<span class="Text">${array[i].value}</span>
<span class="Remove" data-id="${"elem-" + i}">( Remove )</span>
`;
document.body.appendChild(div);
}
document.querySelectorAll(".Remove").forEach(elem => {
elem.addEventListener("click", () => {
remove(elem.dataset.id);
})
});
}
renderElement(array);
function remove(id) {
// Now how to remove the specific item from the array?
// Remove the `elem-` from id.
array.splice(+id.replace("elem-", ""), 1);
document.querySelectorAll("body > .DIV").forEach(elem => {
elem.remove();
});
renderElement(array);
}
// I hope this is fully understandable.
/* CSS IS NOT VERY IMPORTANT */
.DIV {
padding: 10px;
margin: 10px;
background: purple;
color: #fff;
border-radius: 10px;
display: flex;
justify-content: space-between;
}
.Remove {
cursor: pointer;
height: fit-content;
}
推荐阅读
- javascript - 同一域内不同应用程序的 Cookie Session 替代方案
- html - 有没有办法通过python获取动态html
- javascript - 如何避免在渲染方法中使用 setState?
- ansible - 没有从清单文件中挑选主机
- html - 在设置为对齐的嵌套 div 中水平居中文本
- c# - 如果用户没有权限,如何在登录后从菜单中隐藏 Web 表单?
- android - Android如何让图像每隔几秒从HTTP加载
- javascript - Angular 7 中的模板驱动验证
- php - 为什么 PHP 卡在 mysqli_connect 上而没有错误代码?
- python - 无法从 python 中的“if”得到想要的结果