在我的情況下的問題是我可以動態地添加/刪除輸入框，但動態添加或刪除輸入框中的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

相關問題