¿Cómo borrar los datos adjuntos anteriores al cambiar el menú desplegable en JavaScript?

Para borrar los datos agregados anteriormente sobre el cambio, el menú desplegable se lleva a cabo utilizando jQuery. Los datos adjuntos deben borrarse al cambiar o al alternar el menú desplegable; de ​​lo contrario, los datos adjuntos previamente se adjuntan con los datos del elemento de menú actual. Para evitar este problema, se implementa jQuery o JavaScript con la ayuda de los métodos add(), remove(), addClass() y removeClass().

Los siguientes enfoques explicarán claramente:

Enfoque 1: utilice inicialmente el método removeClass() para eliminar la clase activa del elemento de menú de datos agregado anteriormente. Luego, seguido del método addClass() para agregar la clase activa del elemento de menú de datos adjunto actualmente. Ahora use la función each() para agregar datos con respecto a la clase activa agregada o eliminada al hacer clic.

  • Ejemplo: Debajo de la Alerta, elija el ejemplo ilustrado para borrar los datos agregados previamente al cambiar el menú desplegable usando los métodos remove(), add() .

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="
        <script src="
        </script>
        <script src="
        </script>
        <script src="
        </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>
  • Producción:

Enfoque 2: Inicialmente use for loop para eliminar la clase activa del elemento del menú de datos agregado previamente, aquí la condición del bucle se basa en la longitud del elemento enumerado con la ayuda del método remove() . Luego, seguido del método add() para agregar la clase activa del elemento del menú de datos agregado actualmente en la lista. Ahora use la función each() para agregar datos con respecto a la clase activa agregada o eliminada mientras cambia los elementos de la lista.

  • Ejemplo: El siguiente ejemplo de selección de cursos activos ilustra cómo borrar los datos agregados previamente al cambiar el menú desplegable usando los métodos addClass(), removeClass().

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="
        <script src="
        </script>
        <script src="
        </script>
        <script src="
        </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>
  • Producción:

Publicación traducida automáticamente

Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *