Question

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

我可以添加很好，但我不知道如何检测按下哪个按钮，然后从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/

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

Answer 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/

Answer 2

选中 Demo Fiddle

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

这是删除点击'删除'上的元素的代码。

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

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

Answer 3

如何使用数据属性为每个项目添加一个索引（如果它添加到DOM中），这将与数组中的索引相对应？然后，只需在删除索引时检查索引，然后从阵列中删除相应的项目。另一种选择是使用像handlebars.js这样的模板语言

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

3 个答案: