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');隐藏它，但这不是我想要的。

没有错误。水下按钮实际上已被移除，但包裹的跨度和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

http://jsfiddle.net/rlemon/NVbjr/2/

因为您没有以正确的顺序触发此操作。当它不应该时，你有小提琴'onload'。 iirc jQuery mobile很有趣，它的加载顺序。我把它移到了nowrap（身体），一切正常。

Answer 2

您可以删除事件处理程序“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

从jQuery Mobile控制组中删除项目

2 个答案: