jquery之行自加自减

实现目标:点击按钮复制本行,修改后重新插入到本行后面,点击复制出的行可删除本行

代码如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>行自加自减</title>
 6 </head>
 7 <body>
 8     <div class="outer">
 9         <div>
10             <div style="display: inline-block;">
11                 <a onclick="add(this);"><button>+</button></a>
12             </div>
13             <div style="display: inline-block;">
14                 <input type="checkbox">
15                 <input type="text">
16             </div>
17         </div>
18     </div>
19 
20     <script src="jquery-1.8.2.js"></script>
21     <script>
22         function add(self) {
23             var item = $(self).parent().parent().clone();
24             item.find('button').text('-');
25             item.appendTo('.outer');
26             item.find('a').attr('onclick','removee(this);');
27             //$('.outer').append(item)
28         }
29         function removee(ths) {
30             $(ths).parent().parent().remove();
31         }
32     </script>
33 </body>
34 </html>

 

posted @ 2019-02-07 10:42  飞鸟_山东  阅读(273)  评论(0编辑  收藏  举报