Remove two dynamic fields at once in html form

Question

Adding two input fields at once works fine, but how can i remove two input fields as needed.

Reference : https://phppot.com/php/php-contact-form-with-custom-fields/

Example code

<div id="custom-box">
 <label class="custom-input-label">Custom Fields</label>
   <div id="custom-input-container">
      <div class="input-row">
          <input style="width:49%!important; float:left;" type="text" placeholder="Option name" required class="custom-input-field" name="custom_name[]" /> 
          <input style="width:49%!important; float:right;" type="number" placeholder="Price" min="0" step="0.01" required class="custom-input-field float-right" name="custom_value[]" />
  </div>
  </div>
  <input type="button" class="btn-add-more" value="Add More" onClick="addMore()" />
                    </div>

and Java script to add more fields

function addMore() {
               $("<DIV>").load("input.php", function() {
                  $("#custom-input-container").append($(this).html());
            });
        }

input.php page content

<div class="input-row">
    <input style="width:49%!important; float:left;" type="text" placeholder="Option name" required class="custom-input-field" name="custom_name[]" /> 
    <input style="width:49%!important; float:right;" type="number" placeholder="Price" min="0" step="0.01" required class="custom-input-field float-right" name="custom_value[]" />
</div>

Hell Kitchen · Accepted Answer · 2020-04-30 08:31:02Z

1

I am deleting last selector of class name "input-row" and it does work. Here is the solution:

Javascript:

function deleteMore() {
           $("<DIV>").load("input.php", function() {
              $(".input-row:last").remove();
           });  
        }

HTML

<input type="button" class="btn-add-more" value="Delete More" onClick="deleteMore()" 
/>

answered Apr 30, 2020 at 8:31

Hell Kitchen

661 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

site123 Over a year ago

Thanks Hell Kitchen ! Its working. it does delete last row.

Collectives™ on Stack Overflow

Remove two dynamic fields at once in html form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related