javascript - 如何从 Parse 查询结果中删除特定对象？

Question

我的代码遍历查询结果并将它们全部放在一个列表中供用户查看。如何添加删除按钮以删除列表项中命名的对象？目前所有按钮仅删除最后一个结果。

query.exists("serviceName");
query.find({
    success: function(results) {
        //clears current list
        (function($) {
            $("#service-table li").remove();
        })(jQuery);
        //retrieves  new up-to-date list
        for (var i = 0; i < results.length; i++) {
            var object = results[i];

            //Inserts each retrieved serviceName as a list item into the HTML
            (function($) {
                $('#service-table').append('<li class="list-group-item"><span class="badge" id="delete">DELETE</span><a href="#" id="listItemService">' + object.get('serviceName') + '</a></li>');
            })(jQuery);

            //Supposed to delete the relevant object but all delete buttons delete last list item
            (function($) {
                $('#delete').on('click', function() {
                    object.destroy({
                        success: function(object) {},
                        error: function(object, error) {}
                    })
                });
            })(jQuery);
        }
    },
    error: function(error) {}
});

这是列表的示例。

Answer 1

这里有几个问题:

您在所有删除按钮上使用相同的id“删除”。 id 对于一个元素应该是唯一的；引用多个元素时使用类。您的代码将相同的“点击”事件分配给所有带有 id="delete"的元素；它不区分删除按钮。
https://css-tricks.com/the-difference-between-id-and-class/

for 循环的每次迭代都会将变量object 重新分配给results 中的下一个元素。您在循环结束时分配给删除按钮的事件查看变量 object 以查看要销毁的内容，但是在循环的最后一次迭代时，object指向 results 中的最后一个元素。

一种解决方案是使用 data-attributes让每个删除按钮引用结果中的相应项目。您可以为每个删除按钮分配一个 data-id 属性，并将其值设置为相应结果 项的索引。然后，在将“点击”事件绑定(bind)到删除按钮时，使用 event.target 获取被点击元素的 data-id 值并销毁相应的对象。

for (var i = 0; i < results.length; i++) {
// Inserts each retrieved serviceName as a list item into the HTML
// Assigns i as the data-id value for each delete button
    (function($) {
        $('#service-table').append('<li class="list-group-item"><span class="badge delete" data-id=i>DELETE</span><a href="#" id="listItemService">' + object.get('serviceName') + '</a></li>');
    })(jQuery);

    (function($) {
        $('.delete').on('click', function(event) {
            // Gets the value of the clicked delete button's data-id attribute
            var dataID = $(event.target).attr('data-id');
            // Finds the results item whose index is dataID
            var object = results[dataID];
            object.destroy({
                success: function(object) {},
                error: function(object, error) {}
            })
        });
    })(jQuery);
},