The problem in my case is I can dynamically add / remove input boxes, but the problem is when I manually add a set of input box and remove button instead of press add button to create one, it can not remove it.
Is it possible to have 3 sets of input boxes but 2 remove buttons?
Thank you for any kind of help.
<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>
Try setting the remove button actions when the document is loaded.
Try it here or use the code below.