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.
<!DOCTYPE html> < html lang = "en" >
< head >
< link href =
rel = "stylesheet" >
< script src =
</ 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.
<!DOCTYPE html> < html lang = "en" >
< head >
< link href =
rel = "stylesheet" >
< script src =
</ 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 >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#dispose