javascript - 以html形式一次删除两个动态字段

Question

一次添加两个输入字段效果很好，但如何根据需要删除两个输入字段。

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

示例代码

<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>

和 Java 脚本来添加更多字段

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

input.php页面内容

<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>

Answer 1

我正在删除类名“input-row”的最后一个选择器，它确实有效。解决办法如下:

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