約4.5ステップのウィザード実装にモーダルウィンドウを利用しました。最後のステップ（onFinish）とOnCancelステップの後で、ページを更新せずに完全に破棄する必要があります。もちろん非表示にすることもできますが、モーダルウィンドウを非表示にすると、もう一度開いたときにすべてが復元されます。誰かがこの問題について私を助けてくれますか？

ありがとうどんなヒントの答えも私に役立ちます。

ブートストラップ3の場合、次を使用できます。

$("#mimodal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null);
});

注：このソリューションは、バージョン3より前のBootstrapでのみ機能します。Bootstrap3の回答については、user2612497がこれを参照してください。

あなたがしたいことは：

$('#modalElement').on('hidden', function(){
    $(this).data('modal', null);
});

これにより、モーダルは表示されるたびに初期化されます。したがって、リモートコンテンツを使用してdivなどにロードしている場合は、開くたびに再実行されます。モーダルインスタンスが非表示になるたびに、モーダルインスタンスを破棄しているだけです。

または、要素の破棄をトリガーする場合は常に（実際に非表示にするたびではない場合）、真ん中の行を呼び出す必要があります。

$('#modalElement').data('modal', null);

Twitterブートストラップは、データ属性にあるインスタンスを探します。インスタンスが存在する場合は、インスタンスを切り替えるだけです。インスタンスが存在しない場合は、新しいインスタンスを作成します。

お役に立てば幸いです。

3.xバージョンの場合

$( '.modal' ).modal( 'hide' ).data( 'bs.modal', null );

2.xバージョンの場合（危険です。以下のコメントをお読みください）ブートストラップモーダルを作成すると、ページ上に3つの要素が変更されます。したがって、すべての変更を完全にロールバックする場合は、変更ごとに手動で行う必要があります。

$( '.modal' ).remove();
$( '.modal-backdrop' ).remove();
$( 'body' ).removeClass( "modal-open" );

この方法では、ページをリロードせずにモーダルを完全に破棄できます。

$("#modal").remove();
$('.modal-backdrop').remove();

ただし、HTMLページからモーダルが完全に削除されます。このモーダルハイドショーの後は機能しません。

受け入れられた回答を試しましたが、うまく機能していないようで、受け入れられた回答がどのように機能するのかわかりません。

$('#modalId').on('hidden.bs.modal', function () {
  $(this).remove();
})

これは私の側では完全にうまく機能しています。BSバージョン> 3

jQueryの力。$(selector).modal('hide').destroy();最初にスライド効果がある可能性のあるシンドを削除し、次に要素を完全に削除します。ただし、手順の完了後にユーザーがモーダルを再び開くことができるようにする場合。リセットしたい設定のみを更新したい場合があるので、モーダルのすべての入力をリセットするには、次のようになります。

$(selector).find('input, textarea').each(function(){
   $(this).val('');
});

私が理解していることから、あなたはそれを削除したり、隠したりしたくないのですか？後で再利用したいと思うかもしれませんが、もう一度開いた場合に古いコンテンツを残したくないですか？

<div class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

動的テンプレートとして使用したい場合は、次のようにします。

$(selector).modal({show: true})

....

$(selector).modal({show: false})
$(".modal-body").empty()

....

$(".modal-body").append("new stuff & text")
$(selector).modal({show: true})

ブートストラップ3+ jquery 2.0.3：

$('#myModal').on('hide.bs.modal', function () {
   $('#myModal').removeData();
})

モーダルにiframeがある場合は、次のコードでそのコンテンツを削除できます。

$('#myModal').on('hidden.bs.modal', function(){
   $(this).find('iframe').html("");
   $(this).find('iframe').attr("src", "");
});

私のアプローチはclone()、jQueryのメソッドを使用することです。それはあなたの要素のコピーを作成します、そしてそれはあなたが望むものです：あなたが望むときに置き換えることができるあなたの最初の変更されていないモーダルのコピー：デモ（jsfiddle）

var myBackup = $('#myModal').clone();

// Delegated events because we make a copy, and the copied button does not exist onDomReady
$('body').on('click','#myReset',function() {
    $('#myModal').modal('hide').remove();
    var myClone = myBackup.clone();
    $('body').append(myClone);
});

私が使用したマークアップは最も基本的なものなので、適切な要素/イベントにバインドするだけで、ウィザードをリセットする必要があります。

注意してくださいと結合する委任イベントあなたのモーダルの内側の要素ので、各リセット時、または再バインドするのと同じように挙動それぞれの新しいモーダル。

これが私の解決策です：

this.$el.modal().off();

ボタンをクリックすると新しいモーダルを開くという同じシナリオがありました。完了したら、ページから完全に削除したい... removeを使用してモーダルを削除します。ボタンをクリックすると、モーダルが存在するかどうかを確認し、trueの場合は、モーダルを破棄して新しいモーダルを作成します。

$("#wizard").click(function() {
    /* find if wizard is already open */
    if($('.wizard-modal').length) {
        $('.wizard-modal').remove();
    }
});

$('#myModal').on('hidden.bs.modal', function () {
      $(this).data('bs.modal', null).remove();
});

//Just add .remove(); 
//Bootstrap v3.0.3

これにより、モーダルがDOMから完全に削除され、「追加された」モーダルでも機能します。

#pickoptionmodalは私のモーダルウィンドウのIDです。

$(document).on('hidden.bs.modal','#pickoptionmodal',function(e){

e.preventDefault();

$("#pickoptionmodal").remove();

});

ボタンクリックで閉じた直後にモーダルを破壊しなければならないので、次のように思いついた。

$("#closeModal").click(function() {
    $("#modal").modal('hide').on('hidden.bs.modal', function () {
        $("#modal").remove();
    });
});

これはBootstrap3で機能することに注意してください。

ブートストラップ4.xでも動作します

$('#modal_ID').modal( 'hide' ).data( 'bs.modal', null );

モーダルシャドウが暗いままで、複数のモーダルを表示しない場合は、これが役立ちます

$('.modal').live('hide',function(){
    if($('.modal-backdrop').length>1){
        $('.modal-backdrop')[0].remove();
    }
});

リンクのクリックごとに同じモーダルを使用する必要がありました。htmlコンテンツを非表示のコールバックのモーダルの空の ""に置き換えました。

これは私のために働いた。

$('.modal-backdrop').removeClass('in');
$('#myDiv').removeClass('in');

ダイアログと背景は消えましたが、次にボタンをクリックしたときに戻ってきました。

Bootstrapv3.3.6で動作します

$('#dialog').modal()
.on('hide.bs.modal', function () {
    // Some Code
}).on('shown.bs.modal', function () {
    // Some Code
}).on('hidden.bs.modal', function () {
    $("#dialog").off();
});

これだけが私のために働いた

$('body').on('hidden.bs.modal', '.modal', function() {
    $('selector').val('');
});

ブートストラップとjqueryバージョンがこの問題の原因である可能性があるため、セレクターを強制的に空白にするのは安全です。

非表示での単一行の完全な削除（ES6）

$("#myModal").on('hidden.bs.modal', (e)=>e.currentTarget.remove());

ui-routerを使用すると、これはオプションになる場合があります。クローズ時にコントローラーをリロードするため、次回起動する前にモーダルコンテンツを再初期化します。

$("#myModalId").on('hidden.bs.modal', function () {
  $state.reload();  //resets the modal
});

これがどのように聞こえるかはわかりませんが、これは私にとってはうまくいきます..........。

$("#YourModalID").modal('hide');