javascript - 从 Jquery Mobile 中的控制组中删除特定元素

Question

看看这个包含三项的列表:

<div id="results" data-role="controlgroup">
    <input name="first" id="radio1" value="on" type="radio">
    <label for="radio1">One</label>
    <input name="second" id="radio2" value="off" type="radio">
    <label for="radio2">Two</label>
    <input name="third" id="radio3" value="other" type="radio">
    <label for="radio3">Three</label>
</div>

要清空控制组，我只是这样做:

var $group = $("#results").controlgroup();
$group.controlgroup("container").empty();
$group.controlgroup("refresh");

但是，当我尝试删除除第一个元素(第一个输入和第一个标签)之外的所有元素时，我这样做没有得到肯定的结果:

var $group = $("#results").controlgroup();
$group.controlgroup("container").not('input[name="first"], label[for="radio1"]').remove();
$group.controlgroup("refresh");

如您在 this fiddle 中所见，上面的代码删除了控制组中的所有项目。 .您对我如何实现此操作有什么建议吗？提前谢谢你。

• Jquery 移动版 1.4.5

Answer 1

jQuery Mobile 将输入标签对包装到另一个容器中以进行样式设置。因此，您需要选择除第一个之外的那些 child 并将其删除:

$("#delete-except").on("click", function (e) {
    var $group = $("#results").controlgroup();
    $group.controlgroup("container").children(':not(:first)').remove();
    $group.controlgroup("refresh");
});

演示:http://jsfiddle.net/qf9rL6L9/2/