web-dev-qa-db-ja.com

閉じるときにダイアログを完全に削除する方法

Ajax操作が失敗すると、エラーのある新しいdivを作成し、それをダイアログとして表示します。ダイアログが閉じられたら、divを完全に破棄して削除します。これどうやってするの?私のコードは現時点では次のようになっています。

$('<div>We failed</div>')
    .dialog(
    {
        title: 'Error',
        close: function(event, ui)
        {
            $(this).destroy().remove();
        }
    });

これを実行すると、ダイアログボックスは正しく表示されますが、閉じてもダイアログは(FireBugを使用して)htmlに表示されたままです。ここに何が欠けていますか?私が忘れてしまったことは?

更新:コードがfirebugコンソールでエラーを出すことに気づいた。

$(this).destroyは関数ではありません

誰でも私を助けることができますか?

更新:代わりに$(this).remove()を実行すると、HTMLからアイテムが削除されます。しかし、DOMから完全に削除されていますか?または、最初にその破壊関数も何らかの形で呼び出す必要がありますか?

129
Svish
$(this).dialog('destroy').remove()

これにより、ダイアログが破棄され、ダイアログを「ホスト」していたdivがDOMから完全に削除されます

256
lomaxx

なぜ削除したいのですか?

複数のインスタンスが作成されないようにする場合は、次のアプローチを使用してください...

$('#myDialog') 
    .dialog( 
    { 
        title: 'Error', 
        close: function(event, ui) 
        { 
            $(this).dialog('close');
        } 
    }); 

そして、エラーが発生したら、あなたは...

$('#myDialog').html("Ooops.");
$('#myDialog').dialog('open');
$(dialogElement).empty();

$(dialogElement).remove();

これは実際に修正します

8
Ghost1

これは私のために働いています

$('<div>We failed</div>')
    .dialog(
    {
        title: 'Error',
        close: function(event, ui)
        {
            $(this).dialog("close");
            $(this).remove();
        }
    });

乾杯!

PS:似たような問題があり、上記のアプローチで解決しました。

3
deb_

私にとって魅力のように機能するい解決策:

$("#mydialog").dialog(
    open: function(){
        $('div.ui-widget-overlay').hide();
        $("div.ui-dialog").not(':first').remove();
}
});
2
cesar

使用できます

$(dialogElement).empty();    
$(dialogElement).remove();
1
user2994033

私はすべてのjsプロジェクトでこの関数を使用しています

それを呼び出す:hideAndResetModals( "#IdModalDialog")

次の場合に定義します。

function hideAndResetModals(modalID)
{
    $(modalID).modal('hide');
    clearValidation(modalID); //You implement it if you need it. If not, you can remote this line
    $(modalID).on('hidden.bs.modal', function () 
    {
        $(modalID).find('form').trigger('reset');  
    });
}
0
Sterling Diaz