从数组中删除 li 和

Remove li and from array

本文关键字：li 删除 数组      更新时间：2023-09-26
//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与数组匹配并删除它，但我无法弄清楚如何准确地从单击函数中提取任何值。

任何建议都会有所帮助。

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 元素中使用 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;
});
相关文章：