使用 jQuery 从 html 和数组中添加和删除元素答案

【问题标题】：Add and remove elements from html and from array with jQuery使用 jQuery 从 html 和数组中添加和删除元素
【发布时间】：2014-05-29 23:17:53
【问题描述】：

我正在尝试在页面中添加和删除元素，但也从存储数据的数组中添加和删除元素。

我可以很好地添加，但我不知道如何检测按下了哪个按钮，然后从 html 和数组“杂志”中删除它。

这是我目前的代码：

var magazines = [];

$('#submit').click(function (e) {
    // get all the inputs into an array.
    var $inputs = $('#addMagazine :input');

    // get an associative array of just the values.
    var values = {};
    $inputs.each(function () {
        values[this.name] = $(this).val();
    });
    magazines.push(values);
    buildList();
});

function buildList() {
    //Clear the list before printing again
    $("#result").empty();
    for (var i = 0; i < magazines.length; i++) {
        $("#result").append("<li>" + magazines[i].magazine + " : " + magazines[i].number + " : " + magazines[i].year + "<button>remove</button>" + "</li>");
    }
}

这里是 html http://jsfiddle.net/FP4BB/8/

最终目标是将数组存储在本地存储中，但现在我只需要找到一种删除条目的方法吗？

【问题讨论】：

在您的演示中按下了哪个按钮，当然它只是提交按钮（唯一的一个）。 然后去掉那个去掉什么？我不认为你的意思是那个这里指的是按钮提交。

标签： jquery html arrays

【解决方案1】：

第一点，事件委托。使用它可以简化按钮的事件绑定。

第二点，在按钮上添加一个数据，给出数组中的位置。像这样：

$("#result").append("<li>" + magazines[i].magazine + " : " + magazines[i].number + " : " + magazines[i].year + "<button data-pos='" + i + "'>remove</button>" + "</li>");

然后，根据索引移除按钮：

$('#result').on('click', 'button', function(){
    magazines.splice($(this).data('pos'), 1);
    buildList();
})

小提琴：http://jsfiddle.net/FP4BB/10/

【讨论】：

谢谢，效果很好！但是这个“数据位置”，我明白它在这里做了什么，但我不明白它是如何工作的。也许你可以给我指出一个我可以阅读更多关于它的地方？
@Blargmode 是的，当然。学习 jQuery 的最佳地点是 jQuery 网站本身！你可以阅读data API

【解决方案2】：

检查这个Demo Fiddle

$(document).on('click','button:not("#submit")',function(){
    $(this).parent().remove();
})

这是在单击“删除”时删除元素的代码。

要为动态生成的元素添加处理程序，请使用委托。

和button:not("#submit") 激活特定按钮的事件。

【讨论】：

【解决方案3】：

如何使用数据属性在每个项目添加到 DOM 时为其分配一个索引，这将对应于它在数组中的索引？然后，您只需在删除索引时检查索引并从数组中删除适当的项目。另一种选择是使用像handlebars.js这样的模板语言

【讨论】：