¿Cómo agregar y eliminar campos de entrada dinámicamente usando jQuery con Bootstrap?

En este artículo, aprenderemos cómo agregar y eliminar campos de entrada dinámicamente usando jQuery con Bootstrap . Así que le daré un resumen de cómo vamos a lograr esta funcionalidad.

En este proceso, utilizaremos las siguientes funciones múltiples.

Método click(): Click () es un método incorporado en jQuery que inicia el evento de clic o ejecuta la función que se le pasa cuando ocurre un evento de clic.

Sintaxis:

$(selector).click(function);
  • Parámetro: Acepta una “función” de parámetro opcional, que se ejecutará cuando ocurra un evento de clic.
  • Valor devuelto: Devuelve el elemento seleccionado con la función especificada a realizar. 

Método Append(): El método append() inserta contenido específico al final de los elementos seleccionados.

Sintaxis:

$(selector).append(content)

Parámetro: Acepta contenido como parámetro, el parámetro puede ser etiquetas HTML

Método Remove(): Elimina el elemento seleccionado.

Sintaxis:

$(selector).remove();

Método Parent(): Obtenga el elemento principal directo del elemento seleccionado.

Sintaxis:

$(selector).parent();

Enlaces CDN:

<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css”>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

Acercarse: 

  • En primer lugar, agregue jQuery y Bootstrap CDN al script o descárguelos a su máquina local.
  • Cree un grupo de entrada y agregue un campo de entrada junto con un botón. es decir, este botón se utilizará para eliminar este campo de entrada.
  • Cree un botón y al hacer clic en este botón agregaremos dinámicamente los campos de entrada.
  • Ahora escriba la función click() para manejar la funcionalidad de agregar y quitar.
  • Utilice el método append() para agregar el código del campo de entrada al documento HTML existente.
$('#newinput').append(newRowAdd);
  • Utilice el método remove() para eliminar el campo de entrada del documento.
$(this).parents("#row").remove();  
  • Agregue algo de estilo a la página usando el programa de arranque.

Ejemplo:

HTML

<!doctype html>
<html lang="en">
 
<head>
    <title>Add or Remove Input Fields Dynamically</title>
    <link rel="stylesheet" href=
"//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
 
    <style>
        body {
            display: flex;
            flex-direction: column;
            margin-top: 1%;
            justify-content: center;
            align-items: center;
        }
 
        #rowAdder {
            margin-left: 17px;
        }
    </style>
</head>
 
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <strong> Adding and Deleting Input fields Dynamically</strong>
 
    <div style="width:40%;">
 
        <form>
            <div class="">
                <div class="col-lg-12">
                    <div id="row">
                        <div class="input-group m-3">
                            <div class="input-group-prepend">
                                <button class="btn btn-danger"
                                    id="DeleteRow" type="button">
                                    <i class="bi bi-trash"></i>
                                    Delete
                                </button>
                            </div>
                            <input type="text"
                                class="form-control m-input">
                        </div>
                    </div>
 
                    <div id="newinput"></div>
                    <button id="rowAdder" type="button"
                        class="btn btn-dark">
                        <span class="bi bi-plus-square-dotted">
                        </span> ADD
                    </button>
                </div>
            </div>
        </form>
    </div>
 
    <script type="text/javascript">
 
        $("#rowAdder").click(function () {
            newRowAdd =
            '<div id="row"> <div class="input-group m-3">' +
            '<div class="input-group-prepend">' +
            '<button class="btn btn-danger" id="DeleteRow" type="button">' +
            '<i class="bi bi-trash"></i> Delete</button> </div>' +
            '<input type="text" class="form-control m-input"> </div> </div>';
 
            $('#newinput').append(newRowAdd);
        });
 
        $("body").on("click", "#DeleteRow", function () {
            $(this).parents("#row").remove();
        })
    </script>
</body>
 
</html>

Producción:

 

HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .

CSS es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .

Publicación traducida automáticamente

Artículo escrito por pulamolusaimohan 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 *