二款jquery动态添加删除div代码

<script type="text/网页特效" src="jquery.js"></script>

<body>
<form action="" method="post" enctype="multipart/form-data">
<label>请选择上传的图片</label>
<a href="javascript:addimg()" >增加图片</a>
<div class="mdiv" id="mdiv">
<div class="iptdiv" >
<input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">x</a>
</div>
</div>
<input type="submit" name="submit" value="上传图片" />
</form>
<script type="text/javascript" >
$(document).ready(function(){
   bindlistener();
});

// 用来绑定事件(使用unbind避免重复绑定)
function bindlistener(){
     $("a[name=rmlink]").unbind().click(function(){
         $(this).parent().remove();
     })
}
function addimg(){
   $("#mdiv").append('<div class="iptdiv"><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink"> x </a></div>');

// 为新元素节点添加事件侦听器
   bindlistener();
}
</script>
 

代码二

 

<script type="text/javascript" src="jquery.js"></script>
<body>
<form action="" method="post" enctype="multipart/form-data">

<label>请选择上传的图片</label>
<a href="javascript:addimg()" >增加图片</a>

<div class="mdiv" id="mdiv">

<div class="iptdiv" >
<input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">x</a>
</div>

</div>

<input type="submit" name="submit" value="上传图片" />
</form>

<script type="text/javascript" >

$(document).ready(function(){

$("a[name=rmlink]").click(function(){
$(this).parent().remove();
})
})

function addimg(){
$("#mdiv").append('<div class="iptdiv" ><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">x</a></div>');
}
</script>

<script type="text/javascript" >
$(document).ready(function(){
        bindlistener();
})

function addimg(){
        $("#mdiv").append('<div class="iptdiv" ><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">x</a></div>');
       
        // 为新元素节点添加事件侦听器
        bindlistener();
}

// 用来绑定事件(使用unbind避免重复绑定)
function bindlistener(){
        $("a[name=rmlink]").unbind().click(function(){
                $(this).parent().remove();
        })
}
</script>

时间: 2025-01-25 08:57:20

二款jquery动态添加删除div代码的相关文章

jquery动态添加删除div 具体实现

这篇文章介绍了jquery动态添加删除div实现代码,有需要的朋友可以参考一下   复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <body> <form action="" method="post" enctype="multipart/form-data"> <

jquery动态添加删除div

jquery动态添加删除div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-

jquery动态添加删除div 具体实现_javascript技巧

复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script><body><form action="" method="post" enctype="multipart/form-data"><label>请选择上传的图片</label><a href=&q

jQuery动态添加删除select项(实现代码)_jquery

复制代码 代码如下: // 添加function col_add() { var selObj = $("#mySelect"); var value="value"; var text="text"; selObj.append("<option value='"+value+"'>"+text+"</option>");}// 删除function col_d

jquery动态添加删除一行数据示例

 这篇文章主要介绍了jquery如何动态添加删除一行数据,需要的朋友可以参考下 <html> <head> <title>添加.删除一行</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/

jQuery动态添加删除与添加表行代码

具体实现代码如下: table的HTML如下:  代码如下 复制代码 <input type="button" value="添加一行" /> <table> <tr><td><input type="button" class = "del" value="删除该行"/></td></tr> </table>

Jquery 动态添加按钮实现代码_jquery

点击添加 动态添加两个文本框: 分别表示x和y的值,点击取消 删除本行的2个文本框记得要引入jquery.js 复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function() { $("#btnMian").click(fun

jquery动态添加删除(tr/td)_javascript技巧

代码很简单,实现的功能也很简单,有需要的小伙伴参考下吧. 复制代码 代码如下: <head runat="server">     <title></title>     <!--easyui -->     <link rel="stylesheet" type="text/css" href="../../script/jquery-easyui-1.3.2/themes/ico

jquery动态添加删除一行数据示例_jquery

复制代码 代码如下: <html> <head> <title>添加.删除一行</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.9.1.js"><