jQuery如何完全删除进度条或对话框

Question

I added a progressbar when my app raise ajax application, this progress bar was prompted by a dialog, I write below code in ajaxStop function:

progressbarDialog.dialog("close");
progressbar.progressbar("close");
this.appendDOM.empty(); `

It works well when the first ajax happens, but from the second time, a dialog and progresss bar display un-normal, a blank part will show under the normal part, I think the dialog may be not deleted but hided, can anyone explain this issue? how can the dialog/progress bar total be deleted?

version 2:

progressbarDialog.dialog('destroy').remove();

do works, but my dialog is a modal dialog, when I raise application more and more time, the back-ground color will become more and more dark~~~~ below is my function, can anyone help me~

GSMProgressBar.prototype.showProgressBar = function(){ this.appendDOM.empty(); this.appendDOM.prepend("");
var progressbar = $( "#progressBarDialog #progressbar" );
var progressbarDialog = $("#progressBarDialog"); $(document).ajaxStart(function(){
var timeoutOption; if(this.config='fast'){ timeoutOption = 300; }else if(this.config='slow'){ timeoutOption = 800; }else{ //default 250 timeoutOption = 500; } progressbar.progressbar({value:false}); function progress() { var val = progressbar.progressbar( "value" ) || 0; if ( val < 75 ) { progressbar.progressbar( "value", val + Math.random() * 25 ); }
if(val<99){ setTimeout( progress, timeoutOption ); } }
setTimeout( progress, 10 ); progressbarDialog.dialog({ modal: true, height: 110, width: 400 }); $(".ui-dialog-titlebar").hide();
}); $(document).ajaxStop(function(){ progressbarDialog.dialog('destroy').remove(); }); };

Answer 1

try changing:

progressbarDialog.dialog("close");

to

progressbarDialog.dialog('destroy').remove();

this destroys the dialog and removes the element that holds the dialog

Answer 2

Try:

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

NOTE: Make sure that you are initializing progressbar after deleting from DOM.