首先我们看一下有什么方法可以用。
jQuery - 添加元素
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
jQuery - 删除元素
删除元素/内容
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
例子1
好,我们下面举个粟子,就以添加一个上传的项为例。
第一步先做个表单
<div class="row-fluid">
<div class="span5">
<div class="widget-box">
<div class="widget-title">
<span class="icon"> <i class="icon-align-justify"></i> </span>
<h5>Box标题</h5>
</div>
<div class="widget-content nopadding">
<form action="/Upload/Up1_Handle" method="POST" class="form-horizontal" enctype="multipart/form-data">
<div tag="group-parent">
<div class="control-group">
<label class="control-label">头像 :</label>
<div class="controls">
<input type="file" name="files" class="span5" placeholder="请选择图片">
<a href="#" class="btn btn-mini btn-info" tag="add"> + </a>
</div>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success">提交</button>
</div>
</form>
</div>
</div>
</div>
</div>
备注:这里我们form里面的第一个
div做了一个自定义属性
tag="group-parent",还有一个添加内容的按钮
<a href="#" class="btn btn-mini btn-info" tag="add"> + </a>
我们点击按钮就在group-parent的结尾插入内容。
第二步写上控制的js
<script>
$(document).ready(function () {
var taghtml = "<div class=\"control-group\"><label class=\"control-label\">头像 :</label><div class=\"controls\"><input type=\"file\" name=\"files\" class=\"span5\" placeholder=\"请选择图片\"><a href=\"#\" class=\"btn btn-mini btn-danger remove\"> - </a></div></div>";
//添加内容
$("[tag='add']").click(function () {
$("[tag='group-parent']").append($html);
//删除内容
$(".remove").click(function () {
$(this).parent().parent().remove();
});
});
});
</script>
备注: 上面的
taghtml就是我们要添加的内容,因为刚才我们在容器里面做了自定义属性
,我们使用$("[tag='group-parent']")就可以选择到容器了。
然后把要添加的内容apped到容器的结尾处就行。
例子2
有时候强迫症发了,我们可能不想在增加一个group-parent的div,我们可以用after()的方法在被选元素之后插入内容。
如果添加的内容只能添加一次,我们可以将内容保存为一个对象。$html = $("");
<script>
$(document).ready(function () {
$html = $("<div class=\"control-group\"><label class=\"control-label\">头像 :</label><div class=\"controls\"><input type=\"file\" name=\"files\" class=\"span5\" placeholder=\"请选择图片\"><a href=\"#\" class=\"btn btn-mini btn-danger remove\"> - </a></div></div>");
//添加内容
$("[tag='add']").click(function () {
$(this).parent().after(taghtml);
//删除内容
$(".remove").click(function () {
$html.remove();
});
});
});
</script>
效果
下面贴个效果