jquery удалить с backbone.js не работает

Question

jquery удалить с backbone.js не работает

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(); 
});

ranjenanil 13 нояб. 2013, в 09:08

Источник

0

Как насчет this.counter-- при удалении элемента?
eightyfive 13 нояб. 2013, в 10:45

Теги:

javascript

jquery

backbone.js

5 ответов

Ещё вопросы

Как насчет this.counter-- при удалении элемента?

Gildor · Answer 1 · 2013-11-13T05-31-00.000Z

Вы можете либо вызвать 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')

Ravi Hamsa · Answer 2 · 2013-11-13T04-33-00.000Z

Похоже, вы пытаетесь удалить последний элемент нажатием кнопки remove, если это так. вы можете изменить элемент удаления на

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()
}

я ценю ваш ответ .. но как я могу удалить конкретный ли, используя количество?
если вы хотите, чтобы это было удалено с помощью count, добавьте класс к каждому li во время создания, что-то вроде «count-3», затем измените на $('li.count-3',this.el).remove() , обновлено ответ

Boti · Answer 3 · 2013-11-14T16-49-00.000Z

Функция удаления не работает. Вы можете использовать селектор "nth-child (nth)" для удаления элемента...

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

eightyfive · Answer 4 · 2013-11-13T08-49-00.000Z

Или, придерживаясь counter:

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

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

jQuery.eq()

homtg · Answer 5 · 2013-11-13T06-04-00.000Z

Не удаляйте элемент, передавая его весь html методу удаления, вам нужно использовать селектор, то есть идентификатор, класс, тип или что-то еще.

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

Это приведет к удалению одного li из ul в зависимости от вашего счетчика. Если вы хотите удалить один специальный li, вам нужно будет изменить настройку, потому что как кнопка может узнать, какой ли удалить при нажатии.

Вы можете сделать сам li кнопкой удаления, например:

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

и как функция удаления:

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

Надеюсь, поможет.