"Dynamic inputs in div"
Bootstrap 3.1.0 Snippet by henrique.valcanaia

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br"> <head> <meta charset="ISO-8859-1" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <style type="text/css"> div.div-nome-mail-row:last-child span.input-group-addon-remove{ display: none; } div.input-group-option:last-child input.form-control{ border-bottom-right-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-top-left-radius: 3px; } div.input-group-option span.input-group-addon-remove{ cursor: pointer; } h3{ text-align: center; } </style> <script type="text/javascript"> //Text fields $(function(){ $(document).on('focus', 'div.form-group-options div.input-group-option:last-child input', function(){ var divNomeMail = $(this).parents('.div-nome-mail-row'); var sDivNomeMailHtml = divNomeMail.html(); var sInputGroupClasses = divNomeMail.attr('class'); //Gambiarra pra nao ficar criando mil inputs if(divNomeMail.next().length >= 1) return; divNomeMail.parent().append('<div class="'+sInputGroupClasses+'">'+sDivNomeMailHtml+'</div>'); }); $(document).on('click', 'div.form-group-options .input-group-addon-remove', function(){ var divNomeMail = $(this).parents('.div-nome-mail-row'); divNomeMail.remove(); }); }); </script> </head> <body> <div name="nameMailDinamico" id="nameMailDinamico"> <h3>Fields</h3> <div class="container col-md-offset-3"> <div class="row"> <div class="div-nome-mail-row row"> <div class="form-group form-group-options col-xs-12 col-sm-8 col-md-4"> <div class="input-group input-group-option col-xs-11"> <input type="text" name="option[]" class="form-control" placeholder="Nome"> </div> </div> <div class="form-group form-group-options col-xs-12 col-sm-8 col-md-4"> <div class="input-group input-group-option col-xs-11"> <input type="text" name="option[]" class="form-control" placeholder="E-mail"> <span class="input-group-addon input-group-addon-remove"> <span class="glyphicon glyphicon-remove"></span> </span> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> //Text fields $(function(){ $(document).on('focus', 'div.form-group-options div.div-nome-mail-row:last-child input', function(){ var divNomeMail = $(this).parents('.div-nome-mail-row'); var sDivNomeMailHtml = divNomeMail.html(); var sInputGroupClasses = divNomeMail.attr('class'); //Gambiarra pra nao ficar criando mil inputs if(divNomeMail.next().length >= 1) return; divNomeMail.parent().append('<div class="' + sInputGroupClasses + '">'+sDivNomeMailHtml+'</div>'); }); $(document).on('click', 'div.form-group-options .input-group-addon-remove', function(){ var divNomeMail = $(this).parents('.div-nome-mail-row'); divNomeMail.remove(); }); }); </script> </body> </html>

Related: See More

Vue Material Kit
Dynamic Sortable Tables
Bootstrap 4 Animated Dynamic Form
Dynamic Avatar Blur

Questions / Comments: