从listview JQuery Mobile中删除元素

当我取消选中某个项目时，我希望它从listview中删除。删除所有项目-没有问题。既不是第一项，也不是最后一项

$("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');

            }
    });

$（“输入[类型='复选框]”）。更改（函数（）{
var项目=$（此项）；
var elementName=$（item.attr（'class'）；
如果（项是（“：选中”）{
$（“#myTB”）.append（$（“
”）.attr（'class'，'ui-li-ui-static ui-btn-up-c ui-li-last'）.append（''+elementName+''）.attr（'id'，elementName））；
}否则{
$（'#'+elementName）.remove（）；
$（'#myTB:visible'）。列表视图（'refresh'）；
}
});

我似乎不知道我做错了什么

HTML-在原始“检查”点处

加上

HTML动态更新的listview-当对多个项目进行检查时，会填充listview

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

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

/*动态添加*/

当您更改复选框并使用

$（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');
    }
});

$（'#myTB'）。在（'change'，'input[type=“checkbox”]”上，函数（）{
var elementName=this.className.replace（/\s+/，''.'），
$element=$（“#”+elementName）；
如果（this.checked&&$element.length==0）{
var li=$（“
”，{'class'：'ui-li静态ui-btn-up-c ui-li-last'}），
label=$（“”，{'for'：elementName}），
输入=$（''，{类型：'checkbox'，
名称：'复选框'，
text:elementName，
id:elementName
}
).prop（'checked'，true）；
$（'#myTB'）.append（li，label，input）；
}否则{
$element.remove（）；
$（'#myTB:visible'）。列表视图（'refresh'）；
}
});

当您更改复选框并使用

$（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');
    }
});

$（'#myTB'）。在（'change'，'input[type=“checkbox”]”上，函数（）{
var elementName=this.className.replace（/\s+/，''.'），
$element=$（“#”+elementName）；
如果（this.checked&&$element.length==0）{
var li=$（“
”，{'class'：'ui-li静态ui-btn-up-c ui-li-last'}），
label=$（“”，{'for'：elementName}），
输入=$（''，{类型：'checkbox'，
名称：'复选框'，
text:elementName，
id:elementName
}
).prop（'checked'，true）；
$（'#myTB'）.append（li，label，input）；
}否则{
$element.remove（）；
$（'#myTB:visible'）。列表视图（'refresh'）；
}
});

我注意到一些事情：

就像@adeneo所说的，你要返回一个完整的类列表，然后将其设置为一个ID，这是行不通的

因为您每次都将类列表设置为ID，所以您使用的是ID，其中每个ID都应该是唯一的

您添加的复选框从不触发

change（）

事件，因为它们在DOM就绪时不存在，您需要事件委派

话虽如此，我制作了一个快速演示，其中选中addTo复选框会添加另一个复选框（默认状态：checked），而取消选中动态框则会删除它们。我希望有帮助

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

$（document）.on（'change'，'input:checkbox'，function（）{
var elementClass=this.className；
如果（选中此项）{
$（“#myTB”）.append（“
动态框！
”）；
}else if（this.id！=“checkbox8”）{
$（this.parent（“li”）.remove（）；
}
});

---

演示：

我注意到一些事情：

就像@adeneo所说的，你要返回一个完整的类列表，然后将其设置为一个ID，这是行不通的

因为您每次都将类列表设置为ID，所以您使用的是ID，其中每个ID都应该是唯一的

您添加的复选框从不触发

change（）

事件，因为它们在DOM就绪时不存在，您需要事件委派

话虽如此，我制作了一个快速演示，其中选中addTo复选框会添加另一个复选框（默认状态：checked），而取消选中动态框则会删除它们。我希望有帮助

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

$（document）.on（'change'，'input:checkbox'，function（）{
var elementClass=this.className；
如果（选中此项）{
$（“#myTB”）.append（“
动态框！
”）；
}else if（this.id！=“checkbox8”）{
$（this.parent（“li”）.remove（）；
}
});

---

演示：

没有HTML就没有用处。

item

有多个类吗？没有HTML就没有用处。

item

有多个类吗？我听到了。当一个项目被添加到listview中时，我添加了attr（'id'，elementName），认为这是我可以用来选择的id。我听到了。当一个项目被添加到listview中时，我添加了attr（'id'，elementName），认为这是我可以用来选择的id。谢谢tymeJV。我想有必要作进一步的解释。我有数百个项目…所有项目都带有一个复选框，可以添加到一个列表中，该列表会转到另一个页面（myTB），该页面会在选中项目后列出所有项目。如果我取消选中复选框，我希望从列表中删除该项目，则从原始项目页面。因此，检查“checkbox8”是否被选中对e不起作用