从数组中删除 li 和

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 都有一个与之关联的 "remove" 按钮。单击 "remove" 将删除 li，但我不知道如何从数组中删除它...

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

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

我在想也许我可以在单击 "remove" 时使用该值，因为函数将使用 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 和

Remove li and from array

javascript

arrays

html-lists