Cómo eliminar un grupo de campos input dinámicamente con jQuery

Los grupos de campos input son la mar de útiles cuando es necesario enviar muchos datos de una sola tacada. En lugar de implementar un montón de campos en el layout de tu sitio web, puedes hacer esto dinámicamente con jQuery, lo cual simplifica muchísimo la tarea. Si cuentas con este requisito en tu proyecto web, has venido al lugar indicado.

En este tutorial te mostraré como agregar campos input de forma dinámica utilizando jQuery y a enviar dichos campos a un script de PHP.

Añadir y eliminar un grupo de campos input dinámicamente

El siguiente ejemplo muestra cómo añadir un grupo de múltiples campos input dinámicamente con jQuery y enviar la información de dichos campos mediante PHP. Para el propósito del ejemplo, utilizaremos dos campos (name y email) en cada grupo y se enviarán todos los grupos a la vez.

Librerías Bootstrap y jQuery

Utilizaremos Bootstrap para hacer que el input y el botón luzcan mejor. Por otro lado, utilizaremos jQuery para añadir más grupos de campos input dinámicamente. Así que, para ello, debes incluir primero sendas librerías.

<!-- Bootstrap css library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap js library -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Ojo, si no quieres utilizar la librería Bootstrap, puedes hacerlo, no importa. Para ello, elimina las líneas que hagan referencia a bootstrap.min.css y bootstrap.min.js. Pero la librería jQuery es inamovible, la necesitamos para añadir más grupos de campos input.

HTML

Inicialmente, se mostrará un grupo de campos input y los demás se añadirán haciendo clic en el botón Ad More situado debajo del último grupo de campos. También, colocaremos un grupo hidden el cual utilizaremos para añadir más campos input con el botón remove.

<form method="post" action="submit.php">
            
    <div class="form-group fieldGroup">
        <div class="input-group">
            <input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
            <input type="text" name="email[]" class="form-control" placeholder="Enter email"/>
            <div class="input-group-addon"> 
                <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
            </div>
        </div>
    </div>
    
    <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
    
</form>

<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
    <div class="input-group">
        <input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
        <input type="text" name="email[]" class="form-control" placeholder="Enter email"/>
        <div class="input-group-addon"> 
            <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
        </div>
    </div>
</div>

Javascript

Una vez se haya hecho clic en el campo Add More (.addMore), un clon del grupo hidden se agregará después del último fieldGroup. Puedes establecer un máximo de grupos de campos mediante la variable maxGroup. El botón Remove (.remove) elimina el fieldGroup padre.

$(document).ready(function(){
    //group add limit
    var maxGroup = 10;
    
    //add more fields group
    $(".addMore").click(function(){
        if($('body').find('.fieldGroup').length < maxGroup){
            var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
            $('body').find('.fieldGroup:last').after(fieldHTML);
        }else{
            alert('Maximum '+maxGroup+' groups are allowed.');
        }
    });
    
    //remove fields group
    $("body").on("click",".remove",function(){ 
        $(this).parents(".fieldGroup").remove();
    });
});

Enviar los valores de dichos campos

Una vez el formulario se envíe al script PHP (submit.php), recibiremos el valor de dichos campos y podremos operar con ellos como nos plazca.

<?php
if(isset($_POST['submit'])){
    $nameArr = $_POST['name'];
    $emailArr = $_POST['email'];
    if(!empty($nameArr)){
        for($i = 0; $i < count($nameArr); $i++){
            if(!empty($nameArr[$i])){
                $name = $nameArr[$i];
                $email = $emailArr[$i];
                
                //database insert query goes here
            }
        }
    }
}
?>

Fuente: codexworld.com