Mam formularz z dynamicznie dodawanymi polami select i input. Jak zrobić możliwość usunięcia wcześniej nowo utworzonego pola?
Kod
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script>
$.validator.messages.max = jQuery.validator.format("Your totals mustn't exceed {0}!");
$.validator.addMethod("quantity", function(value, element) {
return !this.optional(element) && !this.optional($(element).parent().prev().children("select")[0]);
}, "Please select both the item and its amount.");
$().ready(function() {
$("#orderform").validate({
errorPlacement: function(error, element) {
error.appendTo(element.parent().next());
},
highlight: function(element, errorClass) {
$(element).addClass(errorClass).parent().prev().children("select").addClass(errorClass);
}
});
var template = jQuery.validator.format($.trim($("#template").val()));
function addRow() {
$(template(i++)).appendTo("#orderitems tbody");
}
var i = 1;
// start with one row
addRow();
// add more rows on click
$("#add").click(addRow);
});
</script>
<style>form.cmxform{width:50em;}em.error{background:url("unchecked.gif") no-repeat 0px 0px;padding-left:16px;}em.success{background:url("checked.gif") no-repeat 0px 0px;padding-left:16px;}form.cmxform label.error{margin-left:auto;width:250px;}form.cmxform input.submit{margin-left:0;}em.error{color:black;}#warning{display:none;}select.error{border:1px dotted red;}</style>
</head>
<body>
<div id="main">
<textarea style="display:none" id="template">
<tr>
<td>
<label>{0}. Item</label>
</td>
<td class='type'>
<select name="item-type-{0}">
<option value="">Select...</option>
<option value="0">Learning jQuery</option>
<option value="1">jQuery Reference Guide</option>
<option value="2">jQuery Cookbook</option>
<option vlaue="3">jQuery In Action</option>
<option value="4">jQuery For Designers</option>
</select>
</td>
<td class='quantity'>
<input size='4' class="quantity" min="1" id="item-quantity-{0}" name="item-quantity-{0}">
</td>
<td class='quantity-error'></td>
</tr>
</textarea>
<form id="orderform" class="cmxform" method="post" action="result.php">
<h2 id="summary"></h2>
<fieldset>
<table id="orderitems">
<tbody></tbody>
<tfoot>
<tr>
<td colspan="2"> </td>
<td>
<input class="submit" type="submit" value="Submit">
</td>
</tr>
</tfoot>
</table>
</fieldset>
</form>
<button id="add">Add another input to the form</button>
<h1 id="warning">Your form contains tons of errors! Please try again.</h1>
</p>
</div>
</body>
</html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script>
$.validator.messages.max = jQuery.validator.format("Your totals mustn't exceed {0}!");
$.validator.addMethod("quantity", function(value, element) {
return !this.optional(element) && !this.optional($(element).parent().prev().children("select")[0]);
}, "Please select both the item and its amount.");
$().ready(function() {
$("#orderform").validate({
errorPlacement: function(error, element) {
error.appendTo(element.parent().next());
},
highlight: function(element, errorClass) {
$(element).addClass(errorClass).parent().prev().children("select").addClass(errorClass);
}
});
var template = jQuery.validator.format($.trim($("#template").val()));
function addRow() {
$(template(i++)).appendTo("#orderitems tbody");
}
var i = 1;
// start with one row
addRow();
// add more rows on click
$("#add").click(addRow);
});
</script>
<style>form.cmxform{width:50em;}em.error{background:url("unchecked.gif") no-repeat 0px 0px;padding-left:16px;}em.success{background:url("checked.gif") no-repeat 0px 0px;padding-left:16px;}form.cmxform label.error{margin-left:auto;width:250px;}form.cmxform input.submit{margin-left:0;}em.error{color:black;}#warning{display:none;}select.error{border:1px dotted red;}</style>
</head>
<body>
<div id="main">
<textarea style="display:none" id="template">
<tr>
<td>
<label>{0}. Item</label>
</td>
<td class='type'>
<select name="item-type-{0}">
<option value="">Select...</option>
<option value="0">Learning jQuery</option>
<option value="1">jQuery Reference Guide</option>
<option value="2">jQuery Cookbook</option>
<option vlaue="3">jQuery In Action</option>
<option value="4">jQuery For Designers</option>
</select>
</td>
<td class='quantity'>
<input size='4' class="quantity" min="1" id="item-quantity-{0}" name="item-quantity-{0}">
</td>
<td class='quantity-error'></td>
</tr>
</textarea>
<form id="orderform" class="cmxform" method="post" action="result.php">
<h2 id="summary"></h2>
<fieldset>
<table id="orderitems">
<tbody></tbody>
<tfoot>
<tr>
<td colspan="2"> </td>
<td>
<input class="submit" type="submit" value="Submit">
</td>
</tr>
</tfoot>
</table>
</fieldset>
</form>
<button id="add">Add another input to the form</button>
<h1 id="warning">Your form contains tons of errors! Please try again.</h1>
</p>
</div>
</body>
</html>