HTML

Question

我的问题是我可以动态添加/删除输入框，但

问题是当我手动添加一组输入框并删除按钮而不是按添加按钮创建一个时，它无法删除它。

并且可以有3组输入框但是2个删除按钮，js不能正常工作吗？

感谢您提供任何帮助。

enter image description here

    <script>
$(document).ready(function() {
    $("#add").click(function() {
        var intId = $("#buildyourform div").length + 1;
        var label = $("<label>Field Name</label>");
        var labelType = $("<label>Field Type</label>");
        var labelReq = $("<label>Require</label>");
        var labelTag = $("<label>Tag</label>");
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"inputName[]\" class=\"required\" />");
        var fTag = $("<input type=\"text\" name=\"inputTag[]\" class=\"required\" />");
        var fReq = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
        var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });

        fieldWrapper.append(label);
        fieldWrapper.append(fName);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelType);
        fieldWrapper.append(fType);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelReq);
        fieldWrapper.append(fReq);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelTag);
        fieldWrapper.append(fTag);
        fieldWrapper.append('<br>');
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });
});

</script>



</head>
<body>

<form id="config" method="post" action="config.php" >
<fieldset id="buildyourform">
    <legend>Build your own form!</legend>


<!-- I manually create  a set of input box here -->

        <div class="fieldwrapper" id="field1"><label>Field Name</label><input type="text" name="inputName[]" class="required"><br><label>
Field Type</label><select class="fieldtype">
<option value="checkbox">Checked</option><option value="textbox">Text</option><option value="textarea">Paragraph</option></select><br><label>Require</label>
<select class="fieldtype"><option value="checkbox">Checked</option>
<option value="1">Yes</option><option value="0">No</option></select><br><label>
Tag</label><input type="text" name="inputTag[]" class="required"><br><input type="button" class="remove" value="Remove"></div>


<!-- I manually create a set of input box here -->




    <input type="text" name="input[]" value="test">
</fieldset>
<input type="button" value="Add a field" class="add" id="add" />
<input type="submit" value="Submit">


</form>

</html>

Answer 1

尝试在加载文档时设置删除按钮操作。

Try it here或使用以下代码。

<script>
$(document).ready(function() {
    $('.remove').click(function(){
        $(this).parent().remove();
    });

    $("#add").click(function() {
        var intId = $("#buildyourform div").length + 1;
        var label = $("<label>Field Name</label>");
        var labelType = $("<label>Field Type</label>");
        var labelReq = $("<label>Require</label>");
        var labelTag = $("<label>Tag</label>");
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"inputName[]\" class=\"required\" />");
        var fTag = $("<input type=\"text\" name=\"inputTag[]\" class=\"required\" />");
        var fReq = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
        var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });

        fieldWrapper.append(label);
        fieldWrapper.append(fName);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelType);
        fieldWrapper.append(fType);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelReq);
        fieldWrapper.append(fReq);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelTag);
        fieldWrapper.append(fTag);
        fieldWrapper.append('<br>');
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });
});

</script>



</head>
<body>

<form id="config" method="post" action="config.php" >
<fieldset id="buildyourform">
    <legend>Build your own form!</legend>


<!-- I manually create  a set of input box here -->

        <div class="fieldwrapper" id="field1"><label>Field Name</label><input type="text" name="inputName[]" class="required"><br><label>
Field Type</label><select class="fieldtype">
<option value="checkbox">Checked</option><option value="textbox">Text</option><option value="textarea">Paragraph</option></select><br><label>Require</label>
<select class="fieldtype"><option value="checkbox">Checked</option>
<option value="1">Yes</option><option value="0">No</option></select><br><label>
Tag</label><input type="text" name="inputTag[]" class="required"><br><input type="button" class="remove" value="Remove"></div>


<!-- I manually create a set of input box here -->




    <input type="text" name="input[]" value="test">
</fieldset>
<input type="button" value="Add a field" class="add" id="add" />
<input type="submit" value="Submit">


</form>

</html>

Answer 2

这是一个使用模板的绝佳案例，因为它可以使洞内容更易于维护，而不是在javascript中创建整个表单div ...

直播代码：http://jsbin.com/uzelix/edit#javascript,html

HTML

<fieldset id="buildyourform">
  <legend>Build your own form!</legend>
  <div id="fields"></div>
</fieldset>
<button class="btn-add">Add field</button>

<!-- I manually create  a set of input box here -->
<script id="fieldTemplate" type="text/x-jquery-tmpl">
  <div class="fieldwrapper" id="field_${Id}">
    <label>Field Name</label>
    <input type="text" name="fieldname_${Id}" class="required">
    <label>Field Type</label>
    <select class="fieldtype_${Id}">
      <option value="checkbox">Checked</option>
      <option value="textbox">Text</option>
      <option value="textarea">Paragraph</option>
    </select>
    <label>Require</label>
    <select class="fieldtype_${Id}">
      <option value="checkbox">Checked</option>
      <option value="1">Yes</option>
      <option value="0">No</option>
    </select>
    <label>Tag</label>
    <input type="text" name="fieldtag_${Id}" class="required">
    <div class="control-button">
      <button class="btn-remove">Remove</button>
    </div>
  </div>
</script>
<!-- I manually create a set of input box here -->

的jQuery

$(function(){

  $(".btn-add").click(function() {
      addField();
  });

  $(".btn-remove").live("click", function() {
    $(this).closest(".fieldwrapper").slideUp("slow", function() { 
      $(this).remove(); 
      clearRemove();
    });
  });

  // add first field
  addField();

});

function addField() {
  var i = $(".fieldwrapper").length;
  $("#fieldTemplate").tmpl({ Id: i }).appendTo("#fields");
  clearRemove();
}

function clearRemove() {
  // hide all remove buttons except last one so we don't get 
  //  multiple ids... or use a counter to keep ids unique.
  if($(".fieldwrapper").length > 1) {
    $(".btn-remove:last").show();
    $(".btn-remove:not(:last)").hide();
  } 
  else
    $(".btn-remove").hide();
}

在jquery中动态添加或删除输入框

2 个答案:

HTML

的jQuery