Add or Remove Input Fields Dynamically using JQuery

In this article, you will learn how to add or remove input fields dynamically using JQuery.

Step 1 : Include jQuery's CDN. #

You must include the jQuery CDN. Below you can find the CDN link.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Step 2 : create a button element. #

We have a button element with an id ex-btn and a div element where we append the created input fields.

<input type="button" id="ex-btn" value="+" class="ex-btn">
<div id="ex-con" ></div>

Steps 3 : create input fields dynamically. #

Finally, we will create an input element and a button element using JQuery.

 $("#ex-btn").click(function () {
      let contain = '';
      contain += '<div class="ex-row">';
      contain += '<input type="text" placeholder="Enter Your Name">';
      contain += '<button id="remove-row" type="button" class="ex-btn">Remove</button>';
      contain += '</div>';
      $('#ex-con').append(contain);
  });

  $(document).on('click', '#remove-row', function () {
      $(this).closest('.ex-row').remove();
  });