How to Clear Previous Appended Data onChange the Dropdown Menu?
Last Updated :
14 Oct, 2024
To clear previously appended data when the drop-down menu changes, jQuery is used. If the appended data is not cleared upon changing or toggling the drop-down, it will accumulate with the current menu item data. To prevent this issue, methods such as add(), remove(), addClass(), and removeClass() are implemented using jQuery or JavaScript.
Approach: Using jQuery
- Use the removeClass() method to eliminate the active class from the previously appended data menu item.
- Apply the active class to the currently appended data menu item using the addClass() method.
- Utilize each() function to iterate through elements and append data based on the active class that has been toggled.
- Ensure that the class changes occur upon clicking the menu items to maintain proper state management.
Example: This example illustrates how to clear the previously appended data by changing the drop-down using the remove(), and add() methods.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="
https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="
https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1 class="pt-3 text-success font-weight-bold text-center">
GeeksforGeeks
</h1>
<div class="m-3 dropdown">
<button type="button"
class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">
Alert Menu
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Success</a>
<a class="dropdown-item" href="#">Warning</a>
<a class="dropdown-item" href="#">Danger</a>
</div>
</div>
<p id="alert" class="alert alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×
</button><i id="demo"></i> Alert ! ...</p>
</div>
<script>
$("a").click(function() {
// removeClass active of previously selected menu item
$('a.dropdown-item.active').removeClass("active");
// Add class active to current selected menu item
$(this).addClass("active");
// Getting text from within selected elements
let msg = $('a.dropdown-item.active').text();
// If condition to check selected alert message
if (msg == "Success") {
$("#alert").removeClass("alert-warning");
$("#alert").removeClass("alert-danger");
$("#alert").addClass("alert-success");
} else if (msg == "Warning") {
$("#alert").removeClass("alert-success");
$("#alert").removeClass("alert-danger");
$("#alert").addClass("alert-warning");
} else {
$("#alert").removeClass("alert-success");
$("#alert").removeClass("alert-warning");
$("#alert").addClass("alert-danger");
}
let str = "";
$(".active").each(function() {
// Using html() to append html data
str += $(this).html() + " ";
});
$("#demo").html(str);
}).click();
</script>
</body>
</html>
Output:
Example 2: Below active courses selection example illustrate to clear the previously appended data onchange the dropdown using addClass(), removeClass() methods.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="
https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="
https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1 class="pt-3 text-success font-weight-bold text-center">
GeeksforGeeks
</h1>
<div class="m-3 dropdown">
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">
Active Courses Menu
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
JAVA Backend Development
</a>
<a class="dropdown-item" href="#">
DSA Foundation
</a>
<a class="dropdown-item" href="#">
GEEK Class
</a>
<a class="dropdown-item" href="#">
Machine Learning Foundation With Python & AI
</a>
<a class="dropdown-item" href="#">
Competitive Programming
</a>
</div>
</div>
<div class="card">
<div class="card-header bg-primary text-light">
Selected Courses</div>
<div class="card-body p-3 bg-light
text-dark border
border-primary">
<h4 id="demo"></h4>
</div>
<div class="card-footer bg-primary text-light">
Available @ GeeksforGeeks
</div>
</div>
</div>
<script>
$(".dropdown-item").click(function () {
// Select all list items
let dropItems = $(".dropdown-item");
let str = "";
// Remove 'active' tag for all list items
// based on iteration
for (let i = 0; i < dropItems.length; i++) {
dropItems[i].classList.remove("active");
}
// Add 'active' tag for currently selected item
this.classList.add("active");
$(".active").each(function () {
// Using text() to append text data
str += $(this).text() + " ";
});
$("#demo").text(str);
});
</script>
</body>
</html>
Output:
Similar Reads
How to clear all options in a dropdown box? Clearing the entire dropdown list is pretty easy, all we have to do is to create a button, which calls a function that performs the deletion. Let's look at the syntax of the deletion part: document.getElementById("idofdropdownlist").innerHTML = "";Here, it gets all the elements present in the given
2 min read
How to select/deselect multiple options in dropdown using jQuery ? To select and deselect multiple options in a drop-down menu, we will use the HTML and CSS codes. HTML code helps to define the basic structure of the webpage and CSS will benefit in designing the web page. Some essential properties used in the code are as follows- <div> - This is a division ta
4 min read
DropDown OnChange Event Using ReactJS The DropDown OnChange event in ReactJS is an important functionality that allows developers to respond to changes made to a dropdown menu. This event is triggered when the user selects a new option from the dropdown list. In this article, we will learn how to use onChange event in DropDown menu.Prer
2 min read
How to Edit, Copy and Delete Drop Down List in Excel Excel is a versatile tool used globally for various data management tasks, including the use of drop-down lists to simplify data entry and ensure consistency. However, there might be times when you need to modify these lists to keep up with changes in data or requirements. These essential techniques
11 min read
How to get selected option from Dropdown in jQuery ? In this article, we learn how to get the selected option from the dropdown list. This article requires some familiarity with HTML, CSS, JavaScript, and jQuery. We can solve this challenge by using the jQuery val() method. The val() method in jQuery is used to set or return the value of an attribute
2 min read
Bootstrap 5 Dropdowns Menu content Headers Bootstrap 5 Dropdowns Menu content Headers are used to add a header/title to the menu in the dropdown. This can help the user to segregate drop-down options into categories. Bootstrap 5 Dropdowns Menu content Headers Class: dropdown-header: This class is used for creating a dropdown header. Syntax:
2 min read