Add-Remove-input-fields
<!-- Thanks for the Reference
Tutorial: How to add/remove input field with jquery
Author: Anand Roshan
Author URI: http://voidtricks.com
Documentation: http://voidtricks.com/jquery-add-remove-input-fields
Demo URI: http://demo.voidtricks.com/jquery-add-remove-input-fields
-->
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
//when the Add Filed button is clicked
$("#add").click(function (e) {
//Append a new row of code to the "#items" div
$("#items").append('<div><input type="text" name="input[]"><button class="delete">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
});
</script>
</head>
<body>
<button id="add">Add Field</button>
<div id="items">
<div><input type="text" name="input[]"></div>
</div>
</body>
</html>
<!-- Thanks for the Reference
Tutorial: How to add/remove input field with jquery
Author: Anand Roshan
Author URI: http://voidtricks.com
Documentation: http://voidtricks.com/jquery-add-remove-input-fields
Demo URI: http://demo.voidtricks.com/jquery-add-remove-input-fields
-->
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
//when the Add Filed button is clicked
$("#add").click(function (e) {
//Append a new row of code to the "#items" div
$("#items").append('<div><input type="text" name="input[]"><button class="delete">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
});
</script>
</head>
<body>
<button id="add">Add Field</button>
<div id="items">
<div><input type="text" name="input[]"></div>
</div>
</body>
</html>
No comments:
Post a Comment