动态添加 删除 input输入框（百度地图路线规划后续）

html:

	<div class="pos-a" id="allmap"
			style="width: 100%; height: 95.5%;">
		</div>
		<div id="up-map-div">
			<form class="form form-horizontal" id="formSubmit" action="${rootPath}/back/permit/insertclxslx.htm">
				<div>
					<input type="text" class="input-text" style="width: 150px;margin-right:30px;"
						 placeholder="输入起点" name="p1" value="" autocomplete="off">&nbsp;&nbsp;
					<button name="" id="" class="btn btn-success" type="submit">
						<i class="Hui-iconfont">&#xe665;</i>搜索
					</button>
					&nbsp;<a style="text-decoration: none" class="ml-5"
						onClick="tjd_add()"
						href="javascript:;">
						<i class="Hui-iconfont" style="font-size:25px;color:white;">&#xe600;</i>
					</a>
				</div>
				<div id="main" style="padding-bottom: 0;">
					<ul id="outul">
					
					</ul>
				</div>
				<div>
					<input type="text" class="input-text" style="width: 150px"
						 placeholder="输入终点" name="p0" value="" autocomplete="off">
				</div>
			</form>
		</div>

js:

var main = document.getElementById("main");
	function tjd_add() {
		 var len = main.getElementsByTagName("li").length+1;
		 
		 var li;
		 li = $("<li style='padding-bottom: 10px;'></li>");
		 li.append("<input name='tjd"+len+"' class='input-text' placeholder='输入途经点' autocomplete='off' type='text' style='width: 150px;'><a style='text-decoration: none' class='ml-5' onClick='tjd_del(this)' href='javascript:;'><i class='Hui-iconfont' style='font-size:25px;color:white;'>&#xe6a1;</i></a>");
		 $("#outul").append(li);
		 
	}
	
	function tjd_del(e) {
		e.parentNode.remove();
	}

效果：

关于存储逻辑 还没有写

这个是搭配昨天写的制作多途经点的线路导航使用的