In this article I will show you how to add textbox dynamically using jQuery. The JQuery append() allows us to append the content into div element and remove a div using jQuery remove() method.
jQuery add remove texbox example code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Add/Remove textbox dynamically using jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnAdd").on("click", function () {
$("#textboxDiv").append("<div><br><inputtype='text'/><br></div>");
});
$("#btnRemove").on("click", function () {
$("#textboxDiv").children().first().remove();
});
});
</script>
</head>
<body style="border:1px solid #e8dbdb;width:450px;height:330px">
<h2>Add/Remove textbox dynamically using jquery</h2>
<div id="textboxDiv"></div>
<br />
<input type="button" id="btnAdd" value="Add" />
<input type="button" id="btnRemove" value="Remove" />
</body>
</html>
Description: Initially, I created a div element named textboxDiv , when you click on the add button, the div element with textbox is appended to the ID textboxDiv.
When you click the Remove button it will get removed by selecting the div with id textboxDiv and remove the last element form its child.
Output:
Post your comments / questions
Recent Article
- How to check PAN-Aadhaar is Linked or NOT?
- How to customize pagination for django admin?
- How to fix HAXM is not installed |in Android Studio
- How to fix CMOS Checksum Error in Computer or Laptop | SOLVED
- Reactivating windows after a Hardware change on PC or Laptop
- FIXED: Windows reported that the hardware of your device has changed. Error code :0xc004F211
- "redirect" is not defined pylance("reportUndefinedVariable)
- This action cannot be completed because the file is open in SQL Server(SQLEXPRESS) - FIXED
Related Article