davidchc/criando_elementos_dinamicos.html

## criando_elementos_dinamicos.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Criando elemento dinamico</title>
    <!-- ADD BOOTSTRAP APENAS PRA FORMATAR HTML-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

    <!-- ADD JQUERY-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- ADD SCRIPT QUE ADICIONAR O ELEMENTOS DINAMICAMENTE-->
    <script>
        $(document).ready(function(){
            //Atribui o evento click a classe .btn-insert-field
            $('.btn-insert-field').click(function(e){
                //Remove ação padrão do link para não atualiza a página
                e.preventDefault();

                //Define o elemento onde será inserido os campos
                var target  = $("#target");
                //total de linhas criadas dinamicamente
                //Será utilizado com indices pra serem removidos mais facilmente
                var total = $("#target tr").length;
                //Cria estrutura que será inserida
                var html   = '<tr class="row-field-'+total+'">';
                        html   += '<td><input type="text" name="product[]" /></td>';
                        html   += '<td><input type="text" name="price[]" /></td>';
                        html   += '<td><a href="#" class="btn btn-danger btn-sm  btn-delete-row" data-id="'+total+'">X</a></td>';
                    html   += '<tr>';

                //Adiciona no final do elemento que foi selecionado anteriormente
                target.append(html);
            });

            //Atribui a classe .btn-delete-row o evento click
            //É usado on porque o elemento será criado dinamicamente
            $(document).on('click', '.btn-delete-row', function(e){
                //Remove ação padrão do link para não atualiza a página
                e.preventDefault();
                //pega o valor do data-id
                var id  = $(this).data('id');
                //Remove a linha
                $('.row-field-'+id).detach();

            });
        });
    </script>
</head>
<body>

   <div class="container">
       <table class="table">
           <thead class="thead-dark">
               <tr>
                   <th>Produto</th>
                   <th>Preço</th>
                   <th width="5"><a href="#" class="btn btn-primary btn-insert-field">Adicionar</a></th>
               </tr>
           </thead>
           <tbody id="target">

           </tbody>
       </table>
   </div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Criando elemento dinamico</title>
	<!-- ADD BOOTSTRAP APENAS PRA FORMATAR HTML-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

	<!-- ADD JQUERY-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<!-- ADD SCRIPT QUE ADICIONAR O ELEMENTOS DINAMICAMENTE-->
	<script>
	$(document).ready(function(){
	//Atribui o evento click a classe .btn-insert-field
	$('.btn-insert-field').click(function(e){
	//Remove ação padrão do link para não atualiza a página
	e.preventDefault();

	//Define o elemento onde será inserido os campos
	var target = $("#target");
	//total de linhas criadas dinamicamente
	//Será utilizado com indices pra serem removidos mais facilmente
	var total = $("#target tr").length;
	//Cria estrutura que será inserida
	var html = '<tr class="row-field-'+total+'">';
	html += '<td><input type="text" name="product[]" /></td>';
	html += '<td><input type="text" name="price[]" /></td>';
	html += '<td><a href="#" class="btn btn-danger btn-sm btn-delete-row" data-id="'+total+'">X</a></td>';
	html += '<tr>';

	//Adiciona no final do elemento que foi selecionado anteriormente
	target.append(html);
	});

	//Atribui a classe .btn-delete-row o evento click
	//É usado on porque o elemento será criado dinamicamente
	$(document).on('click', '.btn-delete-row', function(e){
	//Remove ação padrão do link para não atualiza a página
	e.preventDefault();
	//pega o valor do data-id
	var id = $(this).data('id');
	//Remove a linha
	$('.row-field-'+id).detach();

	});
	});
	</script>
	</head>
	<body>

	<div class="container">
	<table class="table">
	<thead class="thead-dark">
	<tr>
	<th>Produto</th>
	<th>Preço</th>
	<th width="5"><a href="#" class="btn btn-primary btn-insert-field">Adicionar</a></th>
	</tr>
	</thead>
	<tbody id="target">

	</tbody>
	</table>
	</div>

	</body>
	</html>