Question

//Created based off other variables
array = ["apple", "john", "monkey"]; 

for (var i = 0; i < array.length; i++) {
    var li=document.createElement('li');

    ul.appendChild(li);

    li.innerHTML += '<li>' + array[i];
    li.innerHTML += '<a href="#" class="clear">'+remove+'</a></li>';

}
$('a.clear').click(function() {
    $(this).parent().remove();

    return false;
});

您可以从上面看到（不完整的代码，但基本的想法），每个创建的li都有一个与其关联的“删除”按钮。点击“删除”会移除li，但我无法弄清楚如何从阵列中删除它......

我尝试向关联的li添加一个值，如下所示：

   li.innerHTML += '<a href="#" value="'+array[i]+'" class="clear">'+remove+'</a></li>;

我想也许我可以在点击“删除”时使用该值，因为函数将使用indexOf与数组匹配并删除它，但我无法弄清楚如何从中提取任何值点击功能。

任何建议都会有所帮助。

Answer 1

尝试在li元素中使用id，它将包含数组中特定对象的id。

//Created based off other variables
array = [{id: 1, title: "apple"}, {id: 2, title: "john"}, {id: 3, title: "monkey"}]; 

for (var i = 0; i < array.length; i++) {
    var li=document.createElement('li');

    ul.appendChild(li);

    li.innerHTML += '<li>' + array[i].title;
    li.innerHTML += '<a href="#" id=' + array[i].id + ' class="clear">'+remove+'</a></li>';

}
$('a.clear').click(function() {
    $(this).parent().remove();
    var index = $(this).attr('id');
    array = array.filter(function(item) {
        return item.id != index;
    });
    return false;
});

Answer 2

array = ["apple", "john", "monkey"]; 

$( "body" ).append( "<ul></ul>" );

for(i=0;i<array.length;i++) {
    $( "ul" ).append( $( "<li>" ).html(array[i]+' <a href="#" class="clear" data-item="'+array[i]+'">remove</a>' ));

}

$('a.clear').click(function(e) {

    e.preventDefault();
   $(this).parent().remove();
 index = array.indexOf($(this).data('item'));
if(index != -1) {
    array.splice(index, 1);
}

 console.log(array);
});

JQuery解决方案：http://jsfiddle.net/v9p5k6sm/2/

解释 - 检查值而不是键是更安全的，因为在拼接后键被更改。

从数组中删除li和

2 个答案: