I am using jqgrid on a jquery tabs, creating multiple grids in a tab design.

When i close a tab, I call the following,

$( “#master_lister_div span.ui-icon-close” ).live( “click”, function() {

$(this).closest( “li” ).remove(); 
$( “#” + panelId ).remove();

$( “#tickets_div #master_lister_div”).tabs( “refresh” );
);

This gets rid of the div that the grid lives in but it leaves the following as a hidden div…

<div id=”alertmod_master_grid_“ class=”ui-widget ui-widget-content ui-corner-all ui-jqdialog“ dir=”ltr“ style=”width: 200px; height: auto; z-index: 950; overflow: hidden; top: 431px; left: 852px;“ tabindex=”-1“ role=”dialog“ aria-labelledby=”alerthd_master_grid_“ aria-hidden=”true“>

In my code, it can be N number of grids that can be loaded so each time that happens, these divs stays in place.

Is there a class or a function call to get rid of the grid entirely without any leftovers?

What is the best way to accomplish this?

 

Thank you so much.