Add and remove input fields on click button using jQuery

• Add and remove input fields on click button using jQuery

  <!-- HTML  -->
  <div id="websiteUrlWrapper">
      <div class="form-group mb-0">
          <label for="websiteUrl">Website URL</label>
      </div>
      <div class="form-row form-group">
          <div class="col-md-5">
              <input type="text" class="form-control" id="websiteUrl" name="website_url[]" value="w3codegenerator.com">
          </div>
          <div class="col-md-5">
              <select class="form-control" id="websiteUrlType" name="website_type[]">
                  <option value="1"> Personal </option>
                  <option selected="" value="2"> Company </option>
                  <option value="3"> Blog </option>
                  <option value="4"> RSS feed </option>
                  <option value="5"> Portfolio </option>
                  <option value="6"> Other </option>
              </select>
          </div>
          <div class="col-md-2">
              <button type="button" name="remove" class="btn btn-danger remove"><i class="fa fa-remove"></i></button>
          </div>
      </div>
  </div>
  <button type="button" name="add" class="btn btn-success btn-sm add mb-3"><i class="fa fa-plus" aria-hidden="true"></i> Add website </button>
  <p>JQuery script </p>
  <script>
      $(document).on('click', '.add', function(){
          var html = '<div class="form-row form-group">';
          html +='<div class="col-md-5">';
          html += '<input type="text" class="form-control" id="websiteUrl" name="website_url[]" value="">';
          html += '</div>';
          html +='<div class="col-md-5">';
          html += '<select class="form-control" id="websiteUrlType" name="website_type[]">';
          html +=			'<option selected="" value="1"> Personal </option>';
          html +=			'<option value="2"> Company </option>';
          html +=			'<option value="3"> Blog </option>';
          html +=			'<option value="4"> RSS feed </option>';
          html +=			'<option value="5"> Portfolio </option>';
          html +=			'<option value="6"> Other </option>';
          html +=	'</select>';
          html += '</div>';
          html += '<div class="col-md-2">'
          html += '<button type="button" name="remove" class="btn btn-danger remove"><i class="fa fa-remove"></i></button>';
          html += '</div>';
          html += '</div>';
          $('#websiteUrlWrapper').append(html);
      });
  
      $(document).on('click', '.remove', function(){
          $(this).closest('.form-group').remove();
      });
  </script>
  

  This code snippet helps you to add  input fields dynamically using jQuery. This code snippet helps you to add multiple input fields using the append method and remove input fields using jQuery remove method.

Back to code snippet queries related jquery