JQuery的 - 刪除HTML創建了.clone

我有HTML的一大塊，我使用我的源JQuery的.clone()方法。包含在HTML塊中的是一個「刪除」圖標，點擊時應該刪除複製的HTML塊，但不會。

我可能沒有正確選擇複製的元素，但我不確定。

感謝

下面是代碼：

的HTML

<div id="container"> 
    <h2>Sponsors Section</h2> 
    <form action="" id="myForm"> 
    <div id="addCosponsorSection" style="width:900px; margin-left:12px;"> 
     <div id="cosponsors"> 
      <span class="formColumn1"><label for="sponsorclubname1">Sponsor club name 1:</label></span> 
      <span class="formColumn2"><input type="text" id="cosponsorcontact" name="cosponsorcontact" placeholder="Name" title="Co-sponsor contact" /></span> 
      <span class="formColumn3"><input type="text" id="cosponsoremail" name="cosponsoremail"  placeholder="Email" title="Co-sponsor email" /></span> 
      <span class="formColumn4"><input type="text" id="cosponsorphone" name="cosponsorphone"  placeholder="Phone" title="Co-sponsor phone" /></span> 
     </div> 
     <div class="clear"></div> 
    </div> 
    <div class="clear"></div> 
     <p> 
      <span class="js-add-cosponsor-hyperlink">+ cosponsor</span> 
     </p> 
    </form> 




<!-- Start Add Co-Sponsor Row Template --> 
<div style="display:none"> 
     <div id="cosponsorsTemplate"> 
      <span class="formColumn1"><label>Sponsor club name</label></span> 
      <span class="formColumn2"><input type="text" id="cosponsorcontact" name="cosponsorcontact" placeholder="Name" title="Co-sponsor contact" /></span> 
      <span class="formColumn3"><input type="text" id="cosponsoremail" name="cosponsoremail"  placeholder="Email" title="Co-sponsor email" /></span> 
      <span class="formColumn4"><input type="text" id="cosponsorphone" name="cosponsorphone"  placeholder="Phone" title="Co-sponsor phone" /><a class="icon delete"></a></span> 
     </div> 
</div>  
<!-- End Add Co-Sponsor Row Template -->

的JS

$(document).ready(function() { 
     var uniqueId = 1; 
     $(function() { 
      $('.js-add-cosponsor-hyperlink').click(function() { 

       var copy = $("#cosponsorsTemplate").clone(true).appendTo("#addCosponsorSection").hide().fadeIn('slow'); 
       var cosponsorDivId = 'cosponsors_' + uniqueId; 
       copy.attr('id', cosponsorDivId); 

       var deleteLink = $(this).find('.icon delete'); 
       deleteLink.click(function() { 
        copy.fadeOut(300, function() { $(this).remove(); }); //fade out the removal 

       }); 

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



       }); 

       uniqueId++; 
      }); 
     }); 
    });

來源

2014-01-06 Slinky

'$（this）.find（'。icon delete'）;'看起來不對......應該不是在克隆內部找到刪除按鈕，而是在創建克隆的單擊按鈕內部找到了刪除按鈕？ –

更改此：

var deleteLink = $(this).find('.icon delete');

這樣：

var deleteLink = copy.find(".icon.delete");

來源

2014-01-06 21:07:02

+1不錯，簡單。 http://jsfiddle.net/zAgS7/4/ – showdev

您目前正試圖在+ cosponsor鏈接中選擇一個刪除圖標。您需要選擇模板元素的實際副本。

我已成功地將複製的元素定義爲自己的變量。這樣，您可以選擇元素中被複制的元素。

var thecopy=copy.attr('id', cosponsorDivId);

我也換成你click()處理與on()：

var deleteLink = thecopy.find('a.icon.delete'); 

deleteLink.on('click',function() { 
    copy.fadeOut(300, function() { $(this).remove(); }); //fade out the removal 
});

http://jsfiddle.net/zAgS7/2/

來源

2014-01-06 21:00:02 showdev

JQuery的 - 刪除HTML創建了.clone

回答

相關問題