Удалить элемент из списка JQuery Mobile

Question

Когда я сниму флажок, я хочу, чтобы он был удален из списка. Удаление всех элементов - не проблема. Ни первый элемент, ни последний.

$("input[type = 'checkbox']").change(function(){ 
      var item=$(this); 
      var elementName = $(item).attr('class'); 
      if(item.is(":checked")){ 
      $('#myTB').append($('<li>').attr('class','ui-li ui-li-static ui-btn-up-c ui-li-last').append('<label><input type="checkbox" name="checkbox" checked/>' + elementName + '</label>').attr('id', elementName)); 

      } else { 

       $('#' + elementName).remove(); 
       $('#myTB:visible').listview('refresh'); 

      } 
    }); 

Невозможно понять, что я делаю неправильно здесь.

HTML- в точке оригинала «проверить»

<div id="checkboxes3" data-role="fieldcontain"> 
    <fieldset data-role="controlgroup" data-type="vertical" data-mini="true"> 
    <input id="checkbox8" name="addTo" data-theme="b" type="checkbox" class="Colgate Total Plus Whitening Toothpaste"> 
    <label for="checkbox8"> add to </label> 
    </fieldset> 
</div> 

HTML динамически обновляется ListView - ListView их получает, когда чеки сделаны несколько элементов

<div data-role="content"> 
    <ul id="myTB" data-role="listview" data-divider-theme="b" data-inset="true"> 

     /* dynamically added */ 
    </ul> 
</div> 

Answer 1

Я заметил несколько вещей:

1. как @adeneo сказал, что возвращается весь список классов, затем установив, что в качестве идентификатора, который не будет работать.

2. Поскольку каждый раз, когда вы устанавливаете этот список классов как идентификатор, вы повторно используете идентификаторы, где каждый идентификатор должен быть уникальным.

3. Ваши добавленные флажки никогда не запускают событие change(), потому что они не существуют в DOM ready, вам нужно делегировать события.

С учетом сказанного, я сделал быстрый демонстрационный пример, где проверка флажок AddTo добавляет другой флажок (состояние по умолчанию: проверено), и убрав динамические коробки удаляет их. Я надеюсь, что это помогает.

$(document).on('change', 'input:checkbox', function(){ 
    var elementClass = this.className; 

    if (this.checked) { 
     $("#myTB").append("<li><input type='checkbox' class='appended' checked/>Dynamic Box!</li>"); 
    } else if (this.id != "checkbox8") { 
     $(this).parent("li").remove(); 
    } 
}); 

Демо: http://jsfiddle.net/gNN6B/1/

Answer 2

При изменении флажка и получить его класс, используя $(item).attr('class') вся строка возвращается, поэтому ваш селектор выглядит так:

$('#Colgate Total Plus Whitening Toothpaste').remove(); 

и это не сработает!

Там нет ID в разметке соответствие любой из этих классов, так что это своего рода трудно сказать, что вы на самом деле пытаетесь выбрать, но попробовать что-то вроде:

$('#myTB').on('change', 'input[type="checkbox"]', function(){ 

    var elementName = this.className.replace(/\s+/, '_'), 
     $element = $('#' + elementName); 

    if (this.checked && $element.length === 0){ 
     var li = $('<li />', {'class':'ui-li ui-li-static ui-btn-up-c ui-li-last'}), 
      label = $('<label />', {'for': elementName}), 
      input = $('<input />', {type:'checkbox', 
            name:'checkbox', 
            text: elementName, 
            id : elementName 
            } 
        ).prop('checked', true); 

     $('#myTB').append(li, label, input); 
    } else { 

      $element.remove(); 
      $('#myTB:visible').listview('refresh'); 
    } 
});