<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>jquery 动态添加删除移动dom元素</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var fieldMax = 5;
$("input#add").click(function(){
if($('div.field').size() < fieldMax) {
addField(this);
}else{
alert("达到最大字段数，请先删除再添加！");
}
});
});
function addField(obj) {
$('div#fields').append(
'<div class="field">' +
'字段名称：'+
'<input type="text" name="fieldTitle" /> ' +
'<input type="button" class="up" value="上移" onclick="up(this);"/>'+
'<input type="button" class="down" value="下移" onclick="down(this);"/>'+
'<input type="button" class="delete" value="delete" />'+
'</div>')
.find("input.delete").click(function(){
$(this).parent().remove();
});
}
function up(obj){
$(obj).parent().prev().before($(obj).parent());
}
function down(obj){
$(obj).parent().next().after($(obj).parent());
}
</script>
</head>
<body>
<div id="fields">
<div class="field">
字段名称：
<input type="text" name="fieldTitle">
<input type="button" class="up" value="上移" onclick="up(this);"/>
<input type="button" class="down" value="下移" onclick="down(this);"/>
<input type="button" class="delete" value="delete"/>
</div>
</div>
<input type="button" value="添加字段" id="add">
</body>
</html>
分享到：
相关推荐
jQuery操作DOM节点、数组和字符串 jQuery表单验证 jQuery事件处理 jQuery页面导航（这部分内容较少，增加了几个纯CSS实现） jQuery视觉特效（这部分内容最丰富）。 每个实例都有简洁的注释，基本上原书的精髓都汇聚...
主要介绍了jQuery 实现DOM元素拖拽交换位置，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。 jquery 获取父节点，兄弟节点，在节点内插入内容。 ①$(#test1).parent() // 父节点 ②$(#test1).next() //下一个节点 ③$(#test1).append('...
本文实例分析了jQuery添加删除DOM元素的方法。分享给大家供大家参考，具体如下： 介绍 DOM是Document Object Modeule的缩写，一般来说，DOM操作分成3个方面。 1、DOM Core DOM Core并不专属于javascript，任何一种...
主要介绍了jQuery中DOM常见操作,结合实例形式总结分析了jQuery针对dom属性操作、文档操作等常用方法与操作技巧,需要的朋友可以参考下
本文实例讲述了JS选取DOM元素常见操作方法。分享给大家供大家参考，具体如下： JS选取DOM元素的方法 注意：原生JS选取DOM元素比使用jQuery类库选取要快很多 1、通过ID选取元素 document.getElementById('myid'); 2...
jquery选择器众多，使用选取某个DOM的方法有很多种，如何在选取的某个元素集上面做一些排除呢？下面通过几个实例说明： 1.选择所有的img元素，排除class=phpernote的元素的个数： 代码如下:$(‘img:not(.phpernote)...
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下： 复制元素 前面提到的操作包括：插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置，以及通过新元素来包装已有...
下面小编就为大家带来一篇JQuery 选择器、DOM节点操作练习实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文实例讲述了jQuery创建DOM元素的使用技巧。分享给大家供大家参考。具体分析如下： 利用DOM方法创建元素节点，通常要将document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻烦。 ...
本文实例讲述了jQuery遍历DOM元素与节点方法。分享给大家供大家参考，具体如下： 一、向上遍历–祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素，方法可以接受一个过滤selector来过滤...
如获取id为divId的div下的第一个子div $("#divId").children("div").get(0) ...以上这篇Jquery获取第一个子元素简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
本文实例总结了jQuery常见的遍历DOM操作。分享给大家供大家参考，具体如下： 向上遍历DOM树 .parent():返回被选元素的直接父元素,该方法只会向上一级对DOM树进行遍历 .parents():返回被选元素的所有祖先元素，一直...
本篇文章主要是对jquery获取dom固定元素 添加样式的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
jQuery 的DOM操作方法 元素的创建、复制、重组、修饰，学习jquery dom操作的朋友有福了。
如果为其传入了表示值的参数，则表示设置操作，它将设置DOM元素指定属性的值。 示例代码 // 没有传入value参数，返回第一个匹配元素的value元素 var $a = $("a"); //只会取第一个匹配的 var $color = a.css("co