0

我有一个 jquery，可以通过单击一个按钮将 li 添加到现有的 ul 中，并通过单击其他按钮逐个删除。创建有效，但删除无效。我使用 append 和 remove 来添加和删除 li。

这是我的代码：

$(document).ready(function(){
    var ListView = Backbone.View.extend({
        el: $('body'), // el attaches to existing element 
        events: {
            'click button#add': 'addItem',
            'click button#remove': 'removeItem'
        },
        initialize: function(){
            _.bindAll(this, 'render', 'addItem','removeItem'); 
            this.counter = 0; // total number of items added thus far
            this.render();
        },
        render: function(){
            $(this.el).append("<button id='add'>Add list item</button>");
            $(this.el).append("<button id='remove'>Remove list item</button>");
            $(this.el).append("<ul></ul>");
        }, 
        addItem: function(){
            this.counter++;
            $('ul', this.el).append("<li>hello world"+this.counter+"</li>");
        },
        removeItem: function(){
            alert(this.counter);
            $('li',this.el).remove("<li>hello world"+this.counter+"</li>");
        }
    });
    var listView = new ListView(); 
});
4

5 回答 5

1

你可以调用remove()一个元素来移除它自己，或者给它一个有效的选择器来移除一些其他的元素。所以你可以尝试

$('li:contains("hello world' + this.counter+ '")', this.el).remove()

或者

$('ul', this.el).remove('li:contains("hello world' + this.counter+ '")')

这里我使用:contains选择器。在您的场景中，您还可以使用将:last-child其简化为的选择器：

$('li:last-child', this.el).remove()

或者

$('ul', this.el).remove('li:last-child')
于 2013-11-13T07:39:50.240 回答
1

如果是这种情况，您似乎正试图在单击删除时删除最后一个元素。您可以将删除项目更改为

addItem: function(){
    this.counter++;
    $('ul', this.el).append("<li class='count-"+this.counter+"'>hello world"+this.counter+"</li>");
},
removeItem: function(){
    $('li.counter-'+this.counter+,this.el).remove()
}
于 2013-11-13T07:28:08.303 回答
0

或者，坚持你的counter东西：

    removeItem: function(){
        alert(this.counter);

        this.$('li').eq(this.counter-1).remove();
        this.counter--;
    }

jQuery.eq()

于 2013-11-13T10:30:59.770 回答
0

您不能通过将整个 html 传递给 remove 方法来删​​除该项目，您需要使用选择器，因此可以使用 id、类、类型或其他任何内容。

removeItem: function(e){
  $('ul',this.el).remove('li:nth-child('+counter+')');
}

根据您的计数器，这将从 ul 中删除一 li。如果要删除一个特殊的 li，则需要更改设置，因为按钮如何知道单击时要删除哪个 li。

您可以使 li 本身成为删除按钮，例如：

events: {
 'click li': 'removeLi'
}

并作为删除功能：

removeLi: function(e){
  $(e.target).remove();
}

希望能帮助到你。

于 2013-11-13T07:23:00.827 回答
0

您的删除功能有问题。您可以使用 'nth-child(nth)' css 选择器来删除项目...

removeItem: function(){
  $('ul ' + 'li:nth-child('+this.counter+')',this.el).remove()            
  this.counter--;
}
于 2013-11-14T18:13:38.280 回答