在我的情况下的问题是我可以动态地添加/删除输入框，但动态添加或删除输入框中的jquery

的问题是，当我手动添加一组输入框和删除按钮，而不是按的添加按钮来创建一个，它不能删除它。

和是否有可能有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>

来源

2012-03-21 Leo Chan

您是否使用手动创建的表单元素注册了删除功能？ – 2012-03-21 17:46:24

尝试设置删除按钮的动作被加载文档时。

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>

来源

2012-03-21 17:49:31 enderskill

没错，我忽略了这一点 – 2012-03-21 18:00:12

这是使用模板，因为它使孔的东西更容易维护，而不是创建整个表格div在JavaScript中的优秀案例...

直播代码：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(); 
}

来源

2012-03-21 18:19:50 balexandre

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

回答

HTML

jQuery

相关问题