使用 jquery 动态克隆的元素 - 不能 .remove() 它们或增加它们的 ID

Question

我正在制作一个用户输入表单，最初包含 1 个信息“pod”和 2 个输入。有一个“添加另一个”按钮可以通过 clone()/insertBefore() 多次动态复制 pod - 这似乎工作正常。这是我到目前为止所做的事情：http://jsfiddle.net/N6Xty/8/

以下两个功能变得混乱： 1：我只在克隆的 pod 元素中需要一个“删除我”按钮（即 remove-self），而不是原始 pod - 这只是稍微有效，我尝试了 2 种方法，首先使用 .removeClass()，其次使用 ' if' 语句（已被注释掉），但 'if' 会引发我无法纠正的控制台语法错误。 查看 Fiddle 比解释正在发生的事情要容易得多，但是第一个“删除”按钮位于错误的 pod 上，这是唯一真正有效的按钮......对于代码参考，有 2 个相关变量：“removeThisDivButton”和'removeThisDivButton02'

2：每个克隆的 pod 都有表单输入元素 - 我希望它们具有唯一的 ID（例如，用于引用 textarea 的标签）所以我一直在尝试实现动态 id 递增，但成功有限，我也在尝试实际 pod 上的唯一 ID（不是 100% 要求，但我希望它理想）。为此，有 2 个“附加 ID”脚本，一个使用“索引”，一个注释掉了我从这篇 SO 帖子中得到的：Append ID's

（我看过其他“附加 ID”回复，但我不明白如何将它们应用于此）。

如果有人可以就这方面的任何建议给我建议，那么非常感谢。

HTML：

<div id="outer-wrapper">
        <div class="content-wrapper">
            <a href="#" title="Duplicate" class="duplicate-butt">Add Another</a>
            <form name="userInfoForm" method="post" action="">
                <div id="info-div-" class="append-me-div">      
                    <select name="various-options">
                        <option>-- Please Choose --</option>
                        <option value="opt-one">One</option>
                        <option value="opt-two">Two</option>
                        <option value="opt-three">Three</option>
                    </select>
                    <label for="message-">Comments:</label>
                    <textarea id="message-" class="message-box" rows="10" cols="30"></textarea>

                    <a href="#" class="remove-this-div hidden-button">Remove ME</a>

                </div>
                <button type="submit" id="submit-button">Submit</button>
            </form>
        </div>
    </div>

jQuery:

(function($){
        // append ID (partly working)
        $('#info-div-, #message-').each(function(index){
            $(this).attr({
                'id': this.id + index
            });
        });

        // duplicate the <div>append-me-div</div> + show the 'Remove Me' button
        var duplicateButton = $('a.duplicate-butt');
        var appendMeDiv = $('div.append-me-div');
        var removeThisDivButton = $('a.remove-this-div');
        //var removeThisDivButton02 = $('<a href="#" class="remove-this-div">Remove ME</a>');

        duplicateButton.on('click', function(index){
            appendMeDiv.clone().insertBefore('button#submit-button');

            // 'Remove Me' version01
            removeThisDivButton.removeClass('hidden-button');   

            // 'Remove Me' version02
            /*if (this.appendMeDiv:eq+=(1)){
                removeThisDivButton02.appendTo(this.appendMeDiv);
            }*/

            // append ID (PARTLY working)
            /*appendMeDiv.attr({
                'id': this.id += 1
            });*/

            // append ID (not working)
            var idIncrement = 0;
            $('#info-div-, #message-').each(function(){
            //$('#info-div-').each(function(){
                idIncrement++;
                $('this').attr('id', 'id'+idIncrement);
            });

            console.log('a.duplicate-butt clicked');
        });

        // remove the current/parent <div>append-me-div</div>
        removeThisDivButton.on('click', function(e){
            $(this).parent('div').remove();
            e.preventDefault(); // tried this to stop the page auto-scrolling back to top on click - not working
            console.log('CLICKED: a.remove-this-div');      
        });
    })(jQuery);

Answer 1

这应该会让你继续前进。您必须将新克隆存储为对象，然后对其进行操作。这肯定需要一些调整，但希望它能让你滚动。

http://jsfiddle.net/N6Xty/9/

所有的魔法都发生在这里：var newOne = appendMeDiv.clone();。享受吧！

Answer 2

这实际上非常简单，诀窍是将处理程序附加到原始“删除我”按钮，然后使用clone(true, true) 克隆包括附加处理程序在内的所有内容：

(function($) {
    var appendMeDiv = $('.append-me-div');
    var submitButton = $('#submit-button');
    var count = 0;
    $('.remove-this-div').hide().on('click', function(e) {
        e.preventDefault();
        $(this).closest('.append-me-div').remove();
    });
    $('a.duplicate-butt').on('click', function(e) {
        e.preventDefault();
        var clone = appendMeDiv.clone(true, true).insertBefore(submitButton).find('.remove-this-div').show().end();
        var messageBox = clone.find('.message-box');
        var id = messageBox.attr('id') + ++count;
        messageBox.attr( 'id', id ).prev('label').attr( 'for', id );
    });
})(jQuery);

DEMO

就个人而言，我会省略<label for="..."> 功能。在这种情况下它并不是特别重要，因为 textarea 是一个比标签大得多的目标。

javascript 将简化为：

(function($) {
    var appendMeDiv = $('.append-me-div');
    var submitButton = $('#submit-button');
    $('.remove-this-div').hide().on('click', function(e) {
        e.preventDefault();
        $(this).closest('.append-me-div').remove();
    });
    $('a.duplicate-butt').on('click', function(e) {
        e.preventDefault();
        appendMeDiv.clone(true, true).insertBefore(submitButton).find('.remove-this-div').show();
    });
})(jQuery);

DEMO