CODEWITHSUNDEEP
javascripthtmlinput
site123
site123

Reputation: 41

Remove two dynamic fields at once in html form

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>

Upvotes: 0

Views: 52

Answers (1)

Hell Kitchen
Hell Kitchen

Reputation: 66

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()" 
/>

Upvotes: 1

Related Questions