Bootstrap 5 List group dispose() Method

Last Updated : 28 Feb, 2023

Bootstrap’s List group dispose() Method is utilized to dispose of a tab of the list group. This method can work only after the instance is pre-initialized.

The dispose() method is used to dispose of the list group’s tab i.e. destroy the instance of the particular list group tab from the DOM.

Syntax:

var tab-element = document
    .getElementById("list_group-tab-id");
tab-element.dispose();

Parameters: This method accepts argument either an HTML element or its selector.

Example 1: This example demonstrates the usage of the dispose() method on a list group and disposal of an individual tab and also getting the instance of the tab to dispose of the tab in the list group. You can see the list group instance before and after disposing of the list group tab.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
  
<body class="m-2"> 
    <h1 class="text-success">GeeksforGeeks</h1> 
  
    <h3>Bootstrap 5 List dispose() Method</h3> 
      
    <div role="tabpanel"> 
        <div class="list-group" id="myList" 
            role="tablist"> 
            <a class="list-group-item  
                    list-group-item-action active"  
                data-bs-toggle="list" 
                href="#ds" role="tab"> 
                Data Structures 
            </a> 
            <a class="list-group-item  
                    list-group-item-action"  
                data-bs-toggle="list" 
                href="#algo" role="tab"> 
                Algorithms 
            </a> 
            <a class="list-group-item  
                    list-group-item-action"  
                data-bs-toggle="list" 
                href="#bs" role="tab"> 
                Bootstrap 
            </a> 
            <a class="list-group-item  
                    list-group-item-action"  
                data-bs-toggle="list" 
                href="#cpp" role="tab"> 
                C++ 
            </a> 
        </div> 
  
        <div class="tab-content mt-3 p-3 bg-light"> 
            <div class="tab-pane active" 
                id="ds" role="tabpanel"> 
                A data structure is a group of data elements 
                that provides the easiest way to store and 
                perform different actions on the data of 
                the computer. A data structure is a 
                particular way of organizing data in a 
                computer so that it can be used 
                effectively. 
            </div> 
  
            <div class="tab-pane" id="algo" role="tabpanel"> 
                The word Algorithm means ” A set of finite 
                rules or instructions to be followed in 
                calculations or other problem-solving 
                operations ” Or ” A procedure for solving 
                a mathematical problem in a finite number 
                of steps that frequently involves 
                recursive operations” 
            </div> 
  
            <div class="tab-pane" id="bs" role="tabpanel"> 
                Bootstrap is a free and open-source 
                collection of CSS and JavaScript/jQuery 
                code used for creating dynamic websites 
                layout and web applications. 
            </div> 
  
            <div class="tab-pane" id="cpp" role="tabpanel"> 
                C++ is a general-purpose programming 
                language and is widely used nowadays for 
                competitive programming. It has imperative, 
                object-oriented and generic programming 
                features. 
            </div> 
        </div> 
    </div> 
  
    <br> 
    <button class="btn btn-danger" id="disposeDSBtn"> 
        Dispose DS Tab 
    </button> 
    <button class="btn btn-danger" id="disposeBSBtn"> 
        Get instance and Dispose BS Tab 
    </button> 
  
    <script> 
        const dsEl = document.getElementById('ds'); 
        const dsElTab = new bootstrap.Tab(dsEl) 
  
        const bsEl = document.getElementById('bs'); 
        const bsElTab = new bootstrap.Tab(bsEl) 
  
        const disDSBtn = 
            document.getElementById('disposeDSBtn') 
        const disBSBtn = 
            document.getElementById('disposeBSBtn') 
  
        disDSBtn.addEventListener('click', function () { 
  
            // Instance before disposing  
            console.log(dsElTab); 
            dsElTab.dispose() 
  
            // Instance after disposing  
            console.log(dsElTab); 
        }) 
  
        disBSBtn.addEventListener('click', function () { 
            var bsInstance = 
                bootstrap.Tab.getInstance(bsEl); 
  
            // Instance before disposing  
            console.log(bsInstance); 
            bsInstance.dispose() 
  
            // Instance after disposing  
            console.log(bsInstance); 
        }) 
    </script> 
</body> 
  
</html> 

Output:

Example 2: This example demonstrates the usage of the dispose() method on a list group and dispose an individual tab and also creating and getting the instance of the tab to dispose the tab of the list group.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
  
<body class="m-2"> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
      
    <h3> 
        Bootstrap 5 List dispose() Method 
    </h3> 
      
    <div role="tabpanel"> 
        <div class="list-group" 
            id="myList" role="tablist"> 
            <a class="list-group-item  
                      list-group-item-action active"  
                data-bs-toggle="list" 
                href="#ds" role="tab"> 
                Data Structures 
            </a> 
            <a class="list-group-item  
                      list-group-item-action"  
                data-bs-toggle="list" 
                href="#algo" role="tab"> 
                Algorithms 
            </a> 
            <a class="list-group-item  
                      list-group-item-action"  
                data-bs-toggle="list" 
                href="#bs" role="tab"> 
                Bootstrap 
            </a> 
            <a class="list-group-item  
                      list-group-item-action"  
                data-bs-toggle="list" 
                href="#cpp" role="tab"> 
                C++ 
            </a> 
        </div> 
  
        <div class="tab-content mt-3 p-3 bg-light"> 
            <div class="tab-pane active" 
                id="ds" role="tabpanel"> 
                A data structure is a group of data elements 
                that provides the easiest way to store and 
                perform different actions on the data of the 
                computer. A data structure is a particular 
                way of organizing data in a computer so that 
                it can be used effectively. 
            </div> 
            <div class="tab-pane" id="algo" role="tabpanel"> 
                The word Algorithm means ” A set of finite rules 
                or instructions to be followed in calculations 
                or other problem-solving operations ” Or ” 
                A procedure for solving a mathematical problem 
                in a finite number of steps that frequently 
                involves recursive operations” 
            </div> 
            <div class="tab-pane" id="bs" role="tabpanel"> 
                Bootstrap is a free and open-source collection 
                of CSS and JavaScript/jQuery code used for 
                creating dynamic websites layout and 
                web applications. 
            </div> 
            <div class="tab-pane" id="cpp" role="tabpanel"> 
                C++ is a general-purpose programming language 
                and is widely used nowadays for competitive 
                programming. It has imperative, object-oriented 
                and generic programming features. 
            </div> 
        </div> 
    </div> 
  
    <br> 
    <button class="btn btn-danger" id="disposeAlgoBtn"> 
        Dispose Algo Tab 
    </button> 
    <button class="btn btn-danger" id="disposeCPPBtn"> 
        Create and Get instance, and Dispose cpp Tab 
    </button> 
  
    <script> 
        const algoEl = document.getElementById('algo'); 
        const algoElTab = new bootstrap.Tab(algoEl) 
  
        const cppEl = document.getElementById('cpp'); 
  
        const disAlgoBtn = 
            document.getElementById('disposeAlgoBtn') 
        const disCPPBtn = 
            document.getElementById('disposeCPPBtn') 
  
        disAlgoBtn.addEventListener('click', function () { 
  
            // Instance before disposing  
            console.log(algoElTab); 
            algoElTab.dispose() 
  
            // Instance after disposing  
            console.log(algoElTab); 
        }) 
  
        disCPPBtn.addEventListener('click', function () { 
  
            // Creating a new Instance for CPP Tab 
            var cppInstance = 
                bootstrap.Tab.getOrCreateInstance(cppEl); 
  
            // Instance before disposing  
            console.log(cppInstance); 
            cppInstance.dispose() 
  
            // Instance after disposing  
            console.log(cppInstance); 
        }) 
    </script> 
</body> 
  
</html> 