我如何刷新这个模态的HTML?

时间:2016-12-06 11:41:01

标签: jquery twitter-bootstrap

我有这种模式:

<div class="modal fade" id="modal" role="dialog">
    <div class="modal-dialog">    
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title text-center">Sei sicuro di voler eliminare questa applicazione?</h4>
            </div>
            <div class="modal-body">
                <div class="form-group"  id="idRichiesta">
                    <label for="disabledTextInput">Identificativo Richiesta:</label>
                    <div id="idRichiesta"></div>
                </div>
                <div class="form-group" id="applicazione">
                    <label>Applicazione:</label>
                    <div id="applicazione"></div>
                </div>
                <div class="form-group" id="dimensione">
                    <label> Dimensione:</label>
                    <div id="dimensione"></div>
                </div>    
                <div class="form-group" id="creationDate">
                    <label>Data inserimento richiesta:</label>
                    <div id="creationDate"></div>
                </div>
                <div class="form-group" id="descStatoCaricamento">
                    <label>Stato Caricamento:</label>
                    <div id="descStatoCaricamento"></div>
                </div>
                <div class="form-group" id="dataCaricamentoSulCubo">
                    <label>Data caricamento sul cubo:</label>
                    <div id="dataCaricamentoSulCubo"></div>
                </div>
                <div class="form-group" id="esito">
                    <label>Esito:</label>
                    <div id="esito"></div>
                </div>
                <div class="form-group"  id="note">
                    <label>Note:</label>
                    <div id="note"></div>
                </div>
            </div>
            <s:form action="CaricamentoFlussi">
                <div class="row form-group">
                    <div class="col-md-2 col-md-offset-4">
                        <button type="button" class="btn btn-primary btn-block" data-dismiss="modal">No</button>
                    </div>
                    <div class="col-md-2">
                        <s:submit value="Sì" class="btn btn-primary btn-block" />
                    </div>
                </div>
            </s:form>
        </div>
    </div>
</div>

我想在删除模式时只删除标签中<div id="">的数据内容,我该怎么做?我试图做这样的事情:

$(".modal").on("hidden.bs.modal", function(){
    $(".modal-body").html("");
});

然而它没有正常工作,因为它删除了我的模态中的所有内容。

2 个答案:

答案 0 :(得分:0)

根据我的理解,你试图从模态体内的div的内部div's中删除html

<强>解决方案: 您可以使用div上的>选择器来选择它的直接后代并删除内容。请参阅以下示例。

$(".modal-body div.form-group > div").html("");

您的HTML中也有重复的ID,这是不对的。

HTML中的ID应该是唯一的,否则作为替代用途class

如上所述,删除重复的ID。例如,您的HTML必须更改为

<div class="form-group" id="applicazione">
 <label>Applicazione:</label>
  <div></div>                            <!-- removed the id -->
</div>

答案 1 :(得分:0)

尝试

$('#model').empty();

此处#model是模型的ID,而.empty()将从DOM中删除完整的html内容。