动态添加和删除div的js

本人是php的，前端js非我所长，记录一下，以备后用
先说一下思路：本人是后端，对数据相对熟悉一点，所以是以数据的个数来控制下方输入框的个数，当input 点击添加时，将获取的值push到一个对象中，转化成json，然后循环遍历（这里是js遍历json的方法），删除同理。

类似这种，点击“自定义标签”会增加一个新的div，如下图

<div class="form_list" id="addnew">
				<div class="company_box">
					<p class="form_title left" style="line-height: 2rem;">公司标签：</p>
					<p class="zdy_tag right" onclick="addOne();"><span>自定义标签</span></p>
				</div>

				<div class="company_add">
					<input type="text" id="label1" placeholder="自定义标签" />
					<a href="javascript:void(0)" onclick="addbottom();">添加</a>
				</div>

				<textarea name="label2" id="label2" style="display: none;"  ></textarea>
				<!--隐藏域，存放push的对象（对象要先json处理） -->

				<div class="company_list">
					<ul  id="thisway">

						<!--<li><span>让营销变的更快更简单</span><a href="">删除</a></li>-->
						<!--<li><span>让营销变的更快更简单</span><a href="">删除</a></li>-->
						<!--<li><span>让营销变的更快更简单</span><a href="">删除</a></li>-->
					</ul>
				</div>
			</div>

然后是js

var arr =[];
这个是控制输入框的显示和隐藏
function addOne(){
		$('.company_add').css("display","block");
	}

	function addbottom(){
		var text=$('#label2').val();
		if(text !=''){
			arr = JSON.parse($('#label2').val());
		}  
		//上面是判断隐藏域的值是否为空，不为空的话要把值解析。
		arr.push($('#label1').val());
		$('#label2').val(JSON.stringify(arr));
		//把新添加的值存到arr中，在处理成json格式存到隐藏域
		myLabel();
		$('.company_add').css("display","none");
		$('#label1').val('');
	}
//下面是获取隐藏域的json，循环遍历
	function myLabel(){
		var arr1=JSON.parse($('#label2').val());
		$('#thisway').html('');//因为遍历的整个json，要把原来显示的li删除，重新生成
		for(var i=0;i<arr1.length;i++){
			$('#thisway').append('<li><span>'+arr1[i]+'</span><a href="javascript:void(0);" onclick="labelsc('+i+');">删除</a></li>');
		}
	}
//删除也是一样的
	function  labelsc(i){
		var arr3=JSON.parse($('#label2').val());
		arr3.splice(i,1); //删除splic（第几个开始，数量）
		$('#label2').val(JSON.stringify(arr3));
		console.log(arr3);
		$('#thisway').html('');
		for(var i=0;i<arr3.length;i++){
			$('#thisway').append('<li><span>'+arr3[i]+'</span><a href="javascript:void(0);" onclick="labelsc('+i+');">删除</a></li>');
		}
	}

我的主要目的还是把数据提交，所以给隐藏域写一个form表单，将json数据提交到后台保存就可以了（格式是 [“互联网”,“智能家居”]），如果想展示添加的数据，可以这样

$(function(){
		$('#thisway').html('');
		$('#label2').val('{$mylabel}');  //将查询出来的json数据直接赋值给隐藏域
		{if $mylabel}
		    $('.company_add').css("display","none");
		{/if}
		myLabel();
	});

ps：对js熟悉的话，真的可以改变一个后端开发的思路。