How To Add/Remove Input Fields Dynamically with jQuery?

Today, We want to share with you add and remove html elements dynamically with jquery.In this post we will show you Simple Add remove input fields dynamically using jquery with Bootstrap, hear for Dynamically Adding and Removing Event Handlers with jQuery we will give you demo and example for implement.In this post, we will learn about Add And Delete Rows Dynamically Using JQuery with an example.

Dynamically add and remove element with jQuery

Step 1: index.php

<html lang="en">
<head>
  <title>Bootstrap Jquery Add More Field Example - www.pakainfo.com</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>


<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Bootstrap Jquery Add More Field Example</div>
    <div class="panel-body">


        <form action="do_submit.php" >
      	<div class="input-group control-group after-add-more">
          <input type="text" name="product_add[]" class="form-control" placeholder="Enter Product Name Here">
          <div class="input-group-btn"> 
            <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
          </div>
        </div>
        </form>

        <div class="copy hide">
          <div class="control-group input-group" style="margin-top:10px">
            <input type="text" name="product_add[]" class="form-control" placeholder="Enter Product Name Here">
            <div class="input-group-btn"> 
              <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
            </div>
          </div>
        </div>


    </div>
  </div>
</div>


<script type="text/javascript">
    $(document).ready(function() {
      $(".add-more").click(function(){ 
          var html = $(".copy").html();
          $(".after-add-more").after(html);
      });
      $("body").on("click",".remove",function(){ 
          $(this).parents(".control-group").remove();
      });
    });
</script>
</body>
</html>

Step 2: do_submit.php:

<?php
print_r($_REQUEST['product_add']);
exit;
?>

I hope you get an idea about Add Remove input fields dynamically using jQuery demo.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.