使用JQuery向克隆元素添加“删除链接”

时间:2014-01-03 14:42:49

标签: javascript jquery

所有

我需要在所有克隆部分的末尾添加“删除”链接,但不是克隆材料的来源。 This is what I have so far

需要这样的东西:

第一步:

enter image description here

第二步:(克隆的材料没有删除链接)

enter image description here

 <html>
    <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <title>Demo</title>

    <script type="text/javascript">
    var uniqueId = 1;
    $(function() {
         $('.addRow').click(function() {

             var copy = $("#cosponsors").clone(true).appendTo("#myForm");
             var cosponsorDivId = 'cosponsors_' + uniqueId;
             copy.attr('id', cosponsorDivId );

             $('#myForm div:last').find('input').each(function(){
                $(this).attr('id', $(this).attr('id') + '_'+ uniqueId); 
                $(this).attr('name', $(this).attr('name') + '_'+ uniqueId); 

             });

             uniqueId++;  
         });
    });
    </script>


    <style type="text/css">

    </style>
    </head>
    <body>
    <div id="container">
        <h3>Sponsors</h3>
        <form action="" id="myForm">
          <div id="cosponsors" style="padding:12px;">
            <label>Sponsor Info:</label> <input  type="text" id="cosponsorcontact" name="cosponsorcontact"  placeholder="Name" title="Co-sponsor contact" />
            <input  type="text" id="cosponsoremail"  name="cosponsoremail"     placeholder="Email" title="Co-sponsor email" />
            <input  type="text" id="cosponsorphone"  name="cosponsorphone"     placeholder="Phone" title="Co-sponsor phone" />
          </div>
         </form>


        <input type="button" class="addRow" value="Add Sponsor" />

    </div>
    </body>
    </html>

1 个答案:

答案 0 :(得分:2)

试试这个:

 var deleteLink = $("<a>delete</a>");
 deleteLink.appendTo(copy);
 deleteLink.click(function(){
     copy.remove();
 });

请注意,您需要适当设置删除链接的样式,因为它没有href。

JSFiddle:http://jsfiddle.net/5QBLB/