Question

我正在创建一个Web应用程序，我允许用户操作Javascript数组中保存的一些数据。它很容易生成一系列div或HTML列表来表示数组（简单地迭代并添加HTML）但我也希望每个数组元素在HTML中都有一个“删除”按钮，用于删除相应的Javascript数组元素然后更新HTML列表。

澄清列表对用户来说会是这样的：

Item 1 (Delete)
Item 2 (Delete)

理想情况下，我希望“删除”链接在单击时，使用项索引（例如'remove_item（index）'）调用Javascript方法。

我想到了一些尴尬的做法，但我觉得这是以前必须做的事情，并想知道是否有人有一个坚固，快速的解决方案？

Answer 1

获取删除按钮的兄弟的内部HTML，然后在数组中查找该值。然后将其删除，并从DOM中删除删除按钮的父级。

http://api.jquery.com/siblings/

http://api.jquery.com/parent/

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            for (var i=0; i<10; i++){
                var $div = $('<div id="myDiv' + i + '"></div>');
                $span=$("<span>" + i + "</span>");
                $button=$('<button type="button" id="button-' + i + '">Delete Me!</button>');
                $button.click(function(){
                    var id = this.id.split("-")[1];
                    $("#myDiv" + id).remove();
                });
                $div.append($span);
                $div.append($button);
                $("#wrapper").append($div)
            }
        });
    </script>
</head>
<body>
    <div id="wrapper"></div>
</body>
</html>

Answer 2

虽然这是一种矫枉过正，但您可以考虑使用一些JS网格实现，例如DataTables for JQuery。

修改

认为删除DataTables中的行可能并不简单;这是一个例子：

$(function () { $('#example').dataTable( { "aaData": [ //your data array goes here, each row should be an array itself ], "aoColumns": [ { "sTitle": "Column Title" }, //other column declarations { "sTitle": "Delete", "fnRender": function(obj) {return "<a href='#' class='delete'>DELETE</a>";} } ] } ); $('.delete').live('click', function () { $('#example').dataTable().fnDeleteRow($(this).closest('tr').get(0)); return false; }); });

#example只是一张空表： <table cellpadding="0" cellspacing="0" border="0" id="example"></table>

（当然，您需要在<head>中包含JQuery和DataTable。）

Answer 3

您可以使用splice()从数组中删除元素：

myArray = ['a', 'b', 'c', 'd'];
myArray.splice (0,1); 
['b', 'c', 'd'];

删除后，根据需要重新生成HTML列表。

Answer 4

您是否考虑在脚本块中创建包含其中所有属性/数据的对象？然后，您可以为属性分配值，然后至少将UI与代码分开。

Answer 5

您可能想要考虑如何表达数据（数组）和视图（html）之间的关系。

您可以从数组中删除删除函数，然后在数组中循环以修改DOM，或者您可以从视图的方向控制它并首先从DOM中删除，然后循环遍历元素并重建您的阵列。

从HTML处理javascript数组

5 个答案: