SoFunction
Updated on 2025-03-06

jQuery implements dynamic addition and removal of input box code examples

This example shares the specific code for jQuery to dynamically add and delete input boxes for your reference. The specific content is as follows

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Options</title>
 
<script type="text/javascript" src="js/jquery-1.8."></script>
 
<script>
	$(function(){
		// Add options		$("#opbtn").click(function(){
			if($("#opts>li").size() < 6){// Add up to 6 options				$("#opts").append("&lt;li&gt;&lt;input /&gt;&lt;/li&gt;");
			}else{// The number of prompt options has reached the maximum				$("#optips").html("The number of options has reached the maximum and cannot be added!");				$("#optips").css({"color":"red"});
			}
			
		});
		
		// Delete option		$("#delbtn").click(function(){
			if($("#opts&gt;li").size() &lt;= 0){
				$("#optips").html("No option can be deleted!");				$("#optips").css({"color":"red"});
			} else{
				// Delete option, delete the last one each time				$("#opts&gt;li").last().remove();
			}
			
		});
		
		
		
	});
 
&lt;/script&gt;
 
&lt;style&gt;
	*{
		margin: 0px;
		padding: 0px;
	}
	
	#dv{
		width: 100px;
		height: 100px;
		background-color: yellow;
		margin: 0px auto 0px;
	}
	
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div style="margin: 50px;"&gt;
		&lt;input  type="button" value="Add Options"/&gt;
		&lt;input  type="button" value="Delete Options"/&gt;
		&lt;input  type="button" value="Encircling DIV"/&gt;
		&lt;ol  type="A"&gt;&lt;/ol&gt;
		
		&lt;!-- Prompt --&gt;
		&lt;span &gt;&lt;/span&gt;
	&lt;/div&gt;
	
	
&lt;/body&gt;
&lt;/html&gt;
 

The above is the jQuery implementation dynamically add and delete input boxes introduced by the editor. It is explained and integrated in detail. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!