Bootstrap 5 List group dispose() Method
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" >w3wiki</ 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" > w3wiki </ 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 > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#dispose
Contact Us