jQuery自定义标签添加删除代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery自定义标签添加删除代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>jQuery自定义标签添加删除代码</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/tip.css" />
</head>
<body>
<div class="site">
	<div class="title">标签：</div>
	<div class="tip">
		<div class="tip-container"><span class="jia"></span>添加标签</div>
	</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tip.js"></script>
</body>
</html>

JS代码(tip.js):

 $(function (){
	$('.tip-container').click(function (){
	var tipcon = '<div class="tip-input">' + '<input type="text" class="house-tip" placeholder="房产标签">' + '<span class="del"></span>' + '</div>';
	$('.tip').prepend(tipcon);
	// 删除表单 $('.del').click(function (){
	$(this).parent().remove();
}
);
}
);
}
);

CSS代码(tip.css):

.site{width:920px;margin:50px auto;}
.title{float:left;font-size:14px;color:#333;width:10%;height:42px;line-height:42px;text-align:center;}
.tip{float:left;width:80%;height:auto;}
.tip-input{position:relative;float:left;margin:10px 10px;width:200px;height:38px;}
.tip-container{float:left;margin:10px 10px;width:200px;height:40px;line-height:40px;font-size:12px;text-align:center;border:1px solid #F4F4F4;}
.tip-container .jia{display:inline-block;width:20px;height:20px;vertical-align:middle;background:url('../images/jia.svg') no-repeat;background-size:20px 20px;}
.house-tip{display:block;border:1px solid #F4F4F4;width:200px;height:38px;}
.del{position:absolute;right:5px;top:12px;width:20px;height:20px;background:url('../images/del.svg') no-repeat;background-size:20px 20px;}

附件:下载该文件资源,减少时间成本(增值服务)