How to clear previous appended data on change the dropdown menu in JavaScript ?

22 Nov, 2019
To clear the previously appended data on change the drop-down is carried out by using jQuery. Appended data must be cleared on change or on toggling the drop-down menu, otherwise previously appended data append with current menu item data. To avoid this issue, jQuery or JavaScript is implemented with help of add(), remove(), addClass(), and removeClass() methods.
The Following Approaches will explain clearly:
Approach 1: Initially use removeClass() method to remove active class of previously appended data menu item. Then followed by addClass() method to add active class of currently appended data menu item. Now use each() function to append data with respect active class added or removed on click.
Example: Below Alert choosing example illustrate to clear the previously appended data on change the drop-down using remove(), add() methods.<!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            var 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");            }            var str = "";            $(".active").each(function() {                  // Using html() to append html data                str += $(this).html() + " ";            });            $("#demo").html(str);        }).click();    </script></body>  </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            var 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");            }            var str = "";            $(".active").each(function() {                  // Using html() to append html data                str += $(this).html() + " ";            });            $("#demo").html(str);        }).click();    </script></body>  </html>
Output:
Approach 2: Initially use for loop remove active class of previously appended data menu item, here loop condition based on length of item listed with help of remove() method. Then followed by add() method to add active class of currently appended data menu item listed. Now use each() function to append data with respect to active class added or removed while toggling listed items.
Example: Below active courses selection example illustrate to clear the previously appended data onchange the dropdown using addClass(), removeClass() methods.<!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            var dropItems = $(".dropdown-item");            var 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>
<!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            var dropItems = $(".dropdown-item");            var 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:
CSS-Misc
HTML-Misc
JavaScript-Misc
jQuery-Misc
Picked
Bootstrap
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.