思路如下:
第一步样式:
第二部,克隆
<label>关键词 (点击加号可添加关键词)</label>
<div class="input-group key_Div">
<input class="form-control keyword" type="text" dr="1" />
<span class="input-group-addon" id="add"><i class="glyphicon glyphicon-plus"></i></span>
<span class="input-group-addon" id="del"><i class="glyphicon glyphicon-minus"></i></span>
</div>
<hr />
思路(1):
首先,把dr设置为1,这个1的作用是移除不为第一个的div。
思路(2):把文本框清空,否则如下图
js代码:
//克隆
$("#add").click(function () {
var divTest = $(this).parent(); //获取div
var newDiv = divTest.clone(true);
divTest.after(newDiv);
var No = parseInt(divTest.find(".keyword").attr("dr")) + 1; //假设你用p标签显示序号
newDiv.find(".keyword").attr("dr", No);
newDiv.find(".keyword").val("");
});
//移除
$("#del").click(function () {
var va = $(this).parent().find(".keyword").attr("dr");
if (va != "1") {
$(this).parent().remove();
}
});
思路三:进行一个each循环,保存关键字所有的字段,并且用逗号隔开,分割最后一个逗号,作用是保存到数据库中。
//循环关键字
function key()
{
var key = "";
$(".keyword").each(function () {
key += $(this).val()+",";
});
key = key.substring(0, key.length - 1);
}
最终效果