克隆时使用jQuery删除第一个类

我写了一个简单的函数来克隆一个字段：

在线演示： http ： //jsfiddle.net/5yVPg/

HTML：

 + add 
  delete 
  

JS：

 $(document).ready(function () { $('#add-input').click(function () { var newField = $('.child').clone() newField.toggle().attr('class', '') registerRemoveHandlers(newField, '.icon-delete') $(this).parent().append(newField) return false }) function registerRemoveHandlers(el, class) { $(el).find(class).click(function () { $(this).parents('p:first').remove() return false }) } }) 

我想从第一个输入中删除删除图标，我试过：

 $('p.child .icon-delete:first').css('display','none') 

但是没有为所有输入显示删除图标。

PS：如果我可以优化上面的代码我会很高兴:)

Answer 1

看看这个：

 // Keep a single clone of the original var clonedField = $('.child').clone(), main = $('#main'); // Add in the delete  to the cloned field $('', { text: 'delete', class: 'icon-delete', href: '#', click: function(){ $(this).parent().remove(); return false; } }).appendTo(clonedField); // Clone the cloned original and append it back to the list $('#add-input').click(function() { main.append(clonedField.clone()); return false; }); 

代码更简单，更容易理解，然后你有什么，并且应该按照你的预期工作。

在jsfiddle上看到它： http ： //jsfiddle.net/5ZFh6/

Answer 2

• 演示： http ： //aseptik.net/demo/remove-first-class-with-jquery-while-cloning

 $(function() { $('#add-input').click(function() { $('
 ' + 'delete
').appendTo('#main'); }); // just for sake... $('.icon-delete').live('click', function() { $(this).parent().fadeOut(500, function() { $(this).remove(); }); }); }); 

陷阱：

1. 你为什么要克隆？
2. 你为什么要把删除按钮放在首位？

Answer 3

我认为这样做会有诀窍……. $('p.child .icon-delete:first').css('display','none')隐藏了所有.icon-delete p.child 。 在你的情况下，所有p.child都是.icon-delete的孩子

 $('p.child:first .icon-delete').css('display','none') 

Answer 4

 $('#add-input').bind('click',function () { var newField = $('.child').clone(); newField.toggle().attr('class', ''); registerRemoveHandlers(newField, '.icon-delete'); $('p.child:last').after(newField); //append after not cloned child newField.parent().children('p').find('a').show(); //show all 'delete' label newField.prev().find('a').hide(); //hide label from the first child which is right the one before our clone return false; }); 

http://jsfiddle.net/K7F5K/