jQWidgets jqxDockingLayout destroy() Method

Last Updated : 24 Jan, 2023

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDockingLayout is used for representing a jQuery widget that is helpful in creating complex layouts with docked, floated, nested, resized, pinned, unpinned, and closed panels.

The destroy() method is used to destroy the displayed jqxDockingLayout widget. It has no parameters, and it does not return anything.

Syntax:

$("#jqxDockingLayout").jqxDockingLayout('destroy');

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxribbon.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlayout.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>

Example 1: The below example illustrates the jQWidgets jqxDockingLayout destroy() method.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet"
        href="jqwidgets/styles/jqx.base.css"
        type="text/css"/> 
    <script type="text/javascript"
            src="scripts/jquery.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxcore.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxbuttons.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxribbon.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxlayout.js"> 
    </script> 
  <script type="text/javascript"
            src="jqwidgets/jqxdockinglayout.js"> 
    </script> 
  <script type="text/javascript"
            src="jqwidgets/jqxdocking.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqx-all.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            jQWidgets jqxDockingLayout destroy()  
            Method 
        </h3> 
        <div id="jqx_DockingLayout"> 
            <div data-container="C1"> 
                <li>Nidhi Singh</li> 
            </div> 
            <div data-container="C2"> 
                <li>B.Tech</li> 
            </div> 
            <div data-container="C3"> 
                <li>GeeksforGeeks</li> 
            </div> 
        </div> 
        <br> 
        <input type="button" style="margin: 5px;" 
               id="btn" value="Click here" /> 
        <div id="log"></div> 
        <script type="text/javascript"> 
            $(document).ready(function () { 
                var Layout = [{ 
                    items: [{ 
                        items: [{ 
                            items: [{ 
                                contentContainer: 'C1', 
                                type: 'documentPanel', 
                                title: 'Name', 
                            }, { 
                                contentContainer: 'C2', 
                                type: 'documentPanel', 
                                title: 'Qualification', 
                            }, { 
                                contentContainer: 'C3', 
                                type: 'documentPanel', 
                                title: 'Author', 
                            }], 
                            type: 'documentGroup', 
                            height: 100, 
                        },], 
                        type: 'layoutGroup', 
                        height: 100, 
                    }], 
                    orientation: 'vertical', 
                    type: 'layoutGroup' 
                }]; 
                $('#jqx_DockingLayout').jqxLayout({ 
                    width: 290, 
                    height: 80, 
                    layout: Layout 
                }); 
                $("#btn").jqxButton({ 
                    width: 180 
                }); 
                $('#btn').jqxButton(). 
                    click(function () { 
                        $('#jqx_DockingLayout').jqxLayout('destroy'); 
                        $('#log').text("Widget destroyed!"); 
                }) 
            }); 
        </script> 
    </center> 
</body> 
  
</html>

Output:

Example 2: The following is another example of the jqxDockingLayout destroy() method in jQWidgets.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet"
        href="jqwidgets/styles/jqx.base.css"
        type="text/css"/> 
    <script type="text/javascript"
            src="scripts/jquery.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxcore.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxbuttons.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxribbon.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxlayout.js"> 
    </script> 
  <script type="text/javascript"
            src="jqwidgets/jqxdockinglayout.js"> 
    </script> 
  <script type="text/javascript"
            src="jqwidgets/jqxdocking.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqx-all.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            jQWidgets jqxDockingLayout destroy() 
            Method 
        </h3> 
        <div id="jqx_DockingLayout"> 
            <div data-container="C1"> 
                <li>Nidhi Singh</li> 
            </div> 
            <div data-container="C2"> 
                <li>B.Tech</li> 
            </div> 
            <div data-container="C3"> 
                <li>GeeksforGeeks</li> 
            </div> 
        </div> 
        <br> 
        <input type="button" style="margin: 5px;" 
               id="btn" value="Click here" /> 
        <div id="log"></div> 
        <script type="text/javascript"> 
            $(document).ready(function () { 
                var Layout = [{ 
                    items: [{ 
                        items: [{ 
                            items: [{ 
                                contentContainer: 'C1', 
                                type: 'documentPanel', 
                                title: 'Name', 
                            }, { 
                                contentContainer: 'C2', 
                                type: 'documentPanel', 
                                title: 'Qualification', 
                            }, { 
                                contentContainer: 'C3', 
                                type: 'documentPanel', 
                                title: 'Author', 
                            }], 
                            type: 'documentGroup', 
                            height: 100, 
                        },], 
                        type: 'layoutGroup', 
                        height: 100, 
                    }], 
                    orientation: 'vertical', 
                    type: 'layoutGroup' 
                }]; 
                $('#jqx_DockingLayout').jqxLayout({ 
                    width: 290, 
                    height: 80, 
                    layout: Layout 
                }); 
                $("#btn").jqxButton({ 
                    width: 180 
                }); 
                $('#btn').jqxButton(). 
                    click(function () { 
                        var d = $('#jqx_DockingLayout').jqxLayout('destroy'); 
                        if (d != null) { 
                            $('#log').text("Not destroyed!"); 
                        } 
                        else { 
                            $('#log').text("Destroyed!"); 
                        } 
                    }); 
            }); 
  
        </script> 
    </center> 
</body> 
  
</html>