Question

我使用此代码添加/删除输入：

$(document).ready(function() {

  var MaxInputs = 2; //maximum extra input boxes allowed
  var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
  var AddButton = $("#AddMoreFileBox"); //Add button ID

  var x = InputsWrapper.length; //initlal text box count
  var FieldCount = 1; //to keep track of text box added

  //on add input button click
  $(AddButton).click(function(e) {
    //max input box allowed
    if (x <= MaxInputs) {
      FieldCount++; //text box added ncrement
      //add input box
      $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_' + FieldCount + '"/> <a href="#" class="removeclass">Remove</a></div>');
      x++; //text box increment

      $("#AddMoreFileId").show();

      $('AddMoreFileBox').html("Add field");

      // Delete the "add"-link if there is 3 fields.
      if (x == 3) {
        $("#AddMoreFileId").hide();
        $("#lineBreak").html("<br>");
      }
    }
    return false;
  });

  $("body").on("click", ".removeclass", function(e) { //user click on remove text
    if (x > 1) {
      $(this).parent('div').remove(); //remove text box
      x--; //decrement textbox

      $("#AddMoreFileId").show();

      $("#lineBreak").html("");

      // Adds the "add" link again when a field is removed.
      $('AddMoreFileBox').html("Add field");
    }
    return false;
  })

});

我的代码在行动中有效添加输入页面（DEMO）

现在在编辑页面我需要使用保存（默认）输入，但我的代码不起作用，我不能删除保存（默认）输入，我不能看到删除链接（DEMO）

如何解决这个问题？！

Answer 1

首先在你的标签中写一些东西，改变这个：

<a href="#" class="removeclass"></a>

对此：

 <a href="#" class="removeclass">Remove</a>

长度错了，你想要的是inputsWrapper的数量，然后改变这个：

var InputsWrapper = $("#InputsWrapper");

对此：

var InputsWrapper = $("#InputsWrapper").children();

Answer 2

作为@A。罗西说，你需要在<a>标签中添加一个文字此外，x var的值是错误的。请参阅工作代码段：

$(document).ready(function() {

  var MaxInputs = 2; //maximum extra input boxes allowed
  var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
  var AddButton = $("#AddMoreFileBox"); //Add button ID

  var x = InputsWrapper.children().length; //initlal text box count
  var FieldCount = 1; //to keep track of text box added

  //on add input button click
  $(AddButton).click(function(e) {
    //max input box allowed
    if (x <= MaxInputs) {
      FieldCount++; //text box added ncrement
      //add input box
      $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_' + FieldCount + '"/> <a href="#" class="removeclass">Remove</a></div>');
      x++; //text box increment

      $("#AddMoreFileId").show();

      $('AddMoreFileBox').html("Add field");

      // Delete the "add"-link if there is 3 fields.
      if (x == 3) {
        $("#AddMoreFileId").hide();
        $("#lineBreak").html("<br>");
      }
    }
    return false;
  });

  $("body").on("click", ".removeclass", function(e) { //user click on remove text

    if (x > 1) {
      $(this).parent('div').remove(); //remove text box
      x--; //decrement textbox

      $("#AddMoreFileId").show();

      $("#lineBreak").html("");

      // Adds the "add" link again when a field is removed.
      $('AddMoreFileBox').html("Add field");
    }
    return false;
  })

});

* {
  font-family: Arial;
}
a {
  color: #999;
  text-decoration: none;
}
a:hover {
  color: #802727;
}
input {
  padding: 5px;
  border: 1px solid #999;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -web-kit-border-radius: 4px;
  -khtml-border-radius: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
  <div id="InputsWrapper">
    <div>
      <input type="text" name="mytext[]" id="field_1" value="">
      <a href="#" class="removeclass">Remove</a>
    </div>
    <div>
      <input type="text" name="mytext[]" id="field_1" value="">
      <a href="#" class="removeclass">Remove</a>
    </div>
    <div>
      <input type="text" name="mytext[]" id="field_1" value="">
      <a href="#" class="removeclass">Remove</a>
    </div>
    <div>
      <input type="text" name="mytext[]" id="field_1" value="">
      <a href="#" class="removeclass">Remove</a>
    </div>
  </div>
  <div id="AddMoreFileId">
    <a href="#" id="AddMoreFileBox" class="btn btn-info">Add field</a>
    <br>
    <br>
  </div>
  <div id="lineBreak"></div>
  <input type="submit" id="submit" name="send" value="Send">
</form>

添加删除输入无法在编辑模式下工作

2 个答案: