remove first class with jQuery while cloning

Question

I write a simple function to clone a field:

Online Demo: http://jsfiddle.net/5yVPg/

HTML:

<div id="main">
       <a id="add-input" href="#">+ add</a>

       <p class="child">
         <input type="text" name="user[]" />
         <a href="#" class="icon-delete">delete</a>
       </p>
</div>

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
        })
    }
})

I want to remove the delete icon from the first input, I tried :

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

But the delete icon being not displayed for all input.

PS: If I could optimize the codes above I'll be happy :)

Answer 1

Have a look at this instead:

// Keep a single clone of the original
var clonedField = $('.child').clone(),
    main = $('#main');

// Add in the delete <a> to the cloned field
$('<a>', {
    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;
});

The code is simpler and easier to understand then what you have there, and should work as you expect it.

See it on jsfiddle: http://jsfiddle.net/5ZFh6/

Answer 2

$('#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/

Answer 3

i think this will do the trick.......$('p.child .icon-delete:first').css('display','none') is hiding all .icon-delete which is child of p.child. and in your case all p.child is a child of .icon-delete

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

Answer 4

• DEMO: http://aseptik.net/demo/remove-first-class-with-jquery-while-cloning

$(function() {
    $('#add-input').click(function() {
        $('<p><input type="text" name="user[]" /> ' + 
          '<a href="#" class="icon-delete">delete</a></p>').appendTo('#main');
    });

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

gotchas:

1. why you are cloning?
2. why you are placing the delete button in the first place?