删除克隆按钮不起作用

时间:2013-10-12 10:26:45

标签: jquery

我有一个函数可以克隆表单中的一组字段并为它们生成新的名称,这个函数的一部分是能够删除克隆但是它不想工作。

功能;

$(document).ready(function() {
    var newNum = 2;
    cloneMe = function(el) {
        var newElem = el.clone().attr('id', 'container' + newNum);
        newElem.html(newElem.html().replace(/form\[1\]/g, 'form['+newNum+']'));
        newElem.html(newElem.html().replace(/id="(.*?)"/g, 'id="1'+newNum+'"'));
        $('#cloneb').before(newElem);
        $('#delete_name'+ newNum).html('<p id="rem_field"><a href="#"><span>Delete Line</span></a></p>');
        newNum++;
    };

    $('p#rem_field').live('click', function() {
    $(this).parents('div').remove();
    return false;
});    

});

和删除按钮的div;

<div id="delete_name"></div>

删除按钮对于每个克隆应该是唯一的,我将如何更改它以使其实际工作。 jsFiddle for live example http://jsfiddle.net/ZBK2h/1/

1 个答案:

答案 0 :(得分:1)

几乎没有变化......使用delete_name作为班级名称

<div class="delete_name"></div>

然后

$(document).ready(function() {
    var newNum = 2;
    cloneMe = function(el) {
        var newElem = el.clone().attr('id', 'container' + newNum);
        $('#cloneb').before(newElem);
        newElem.find('.delete_name').html('<p class="rem_field"><a href="#"><span>Delete Line</span></a></p>');
        newNum++;
    };

    $(document).on('click', '.rem_field', function() {
        $(this).closest('.instance').remove();
        return false;
    });    

});

演示:Fiddle