jquery - 从 jQuery Mobile 控件组中删除项目

Question

我有一个控制组，其中有一些按钮。现在我想在运行时删除一个按钮。

<div id="buttons" data-role="controlgroup" data-type="horizontal">
    <button id="btn1">Do 1</button>
    <button id="btn2">Do 2</button>
    <button id="btn3">Do 3</button>
</div> 

$('#btn1').remove();

但这行不通。我可以使用 $('#btn1').button('disable'); 隐藏它，但这不是我想要的。

没有错误。在水下，按钮实际上被移除，但包裹的 span 和 div 仍然存在......

这是创建的实际 html:

<div data-type="horizontal" data-role="controlgroup" id="buttons" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
    <div class="ui-controlgroup-controls">
        <div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="" data-iconpos="" data-theme="c" data-inline="false" data-mini="false" class="ui-btn ui-btn-up-c ui-fullsize ui-btn-block ui-corner-left" aria-disabled="false">
            <span class="ui-btn-inner ui-corner-left">
                <span class="ui-btn-text">Do 1</span>
            </span>
            <!-- here button is gone, but not remaining div/span litter -->
        </div>
        <div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="" data-iconpos="" data-theme="c" data-inline="false" data-mini="false" class="ui-btn ui-btn-up-c ui-fullsize ui-btn-block" aria-disabled="false">
            <span class="ui-btn-inner">
                <span class="ui-btn-text">Do 2</span>
            </span>
            <button id="btn2" class="ui-btn-hidden" aria-disabled="false">Do 2</button>
        </div>
        <div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="" data-iconpos="" data-theme="c" data-inline="false" data-mini="false" class="ui-btn ui-btn-up-c ui-fullsize ui-btn-block ui-corner-right ui-controlgroup-last" aria-disabled="false">
            <span class="ui-btn-inner ui-corner-right ui-controlgroup-last">
                <span class="ui-btn-text">Do 3</span>
            </span>
            <button id="btn3" class="ui-btn-hidden" aria-disabled="false">Do 3</button>
        </div>
    </div>
</div>

有人知道该怎么做吗？ http://jsfiddle.net/NVbjr/1/

Answer 1

您可以在事件处理程序“pagebeforecreate”中删除该元素。

$(document).bind('pagebeforecreate', function(){
    $('#btn1').remove();
});

否则，如果您想在以后的事件中将其删除。你可以用其他方式来做。

 $(document).bind('pageshow', function(){ 
     $('div[data-role=controlgroup]').children().each(function(index, value){
        if(index === 0) {
           $(value).remove();
        }
     });
 });

https://dl.dropbox.com/u/49735179/Stackoverflow/buttonGroup/test.html