What is the correct method to destroy jqGrid to avoid detaching DOM nodes?

Question

I am currently facing a situation where I need to destroy a jqGrid that contains a large number of rows before creating a new set of DOM elements. I tried using the jqGrid GridDestroy method, but it still leaves a large number of individual DOM nodes, so I thought I could do it wrong.

Here is my current process that still leaves separate DOM nodes:

$(deleteButton).click(function () {
    $('#grid').jqGrid("clearGridData");
    $('#grid').jqGrid('GridDestroy');
    $('#grid').remove();
    $('#gridContainer').empty();
});

I felt this process was redundant, but it still leads to disconnected DOM nodes. I created an example in jsFiddle ( http://jsfiddle.net/8DYD8/1/ ).

Steps to play:

• Click "Create" to create jqGrid
• Click the delete button
• Chrome debugger- > Profiles DOM

Answer 1

jqgrid @oleg:

GridDestroy jQuery.remove. , , .

GridUnload, , ,   . , .

jqGrid wiki:

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

GridDestroy - , :

id = grid_id DOM ( html, , )