当我在jQuery中复制它时,如何更改HTML的属性？

Question

我正在使用jQuery编写一个脚本,它将完全动态地复制HTML div的内容,然后添加一个按钮来删除相应的"new div".我基本上使用它作为向表单添加更多字段的方法.我会使用现有的脚本,但那里的所有脚本似乎只添加输入字段而且不是很动态.通过这种方式,我可以通过将按钮添加到HTML而不是JavaScript来使用该按钮来复制我想要的内容.

就重复原始容器内容而言,一切似乎都能正常工作.我遇到的唯一问题是为删除按钮分配一个id.在我的例子中,"原始内容"的父div是"引用"...所以第一个"新内容"的id应该是'references-1'......它就是这样.当我创建删除按钮(基于下面显示的div的内容)时,我想将它的id更改为'references-1',这样当它被点击时,它将删除id为'的'新内容'div引用-1' .使用我当前的脚本,删除按钮的所有属性都没有更改...

有人有主意吗？

HTML

<div id="references">
    <!-- The content to duplicate.... excludes the parent div tag i.e. only the input tag. -->
    <input type="text" name="references[]" size="30" class="text-input" placeholder="Must contain a valid, working URL." style="position: relative;z-index: 0;">
</div>
<div id="more-references">
    <-- Where to put the new content -->
</div>
<div id="remove-button" style="visibility: hidden;">
    <-- The button that removes content --> <i class="fi-x"></i>

</div>  <i class="fi-plus" rel="addMore" id="references"></i>
<!-- The button that adds content -->

jQuery:

$(function(){

    var i = 0;

    var oldRemove = $('#remove-button');

    $('[rel="addMore"]').on('click', function(){

        i++;

        var newRemove = oldRemove.clone();

        var buttonID = $(this).attr("id");
        var container = $('#' + buttonID + '-content');
        var content = container.html();
        var insertionPoint = $('#more-' + buttonID);

        insertionPoint.append('<div id="' + buttonID + '-' + i + '">' + content + '</div>');    

        newRemove.prop('id', 'remove-' + buttonID + '-' + i);               
        insertionPoint.append(newRemove.html());        

    });

});

Answer 1

在这里和那里进行一些修改和一次修改,我们很高兴.首先我将删除按钮ID更改为类.然后我存储每个按钮将在数据属性中删除的div的id.

其次,i元素具有与要复制的div相同的id,导致无效的html,

第三,没有元素#reference-content,只有#references存在.

一个简单的委托绑定绑定所有删除按钮:

$(function(){
    var i = 0;
    var oldRemove = $('div.remove-button'),
        div = $('<div/>');
    $(document).on('click', 'div.remove-button', function() {
        $( $(this).data('del') ).remove();
        $(this).remove();
    });

    $('[rel="addMore"]').on('click', function(){
        i++;
        var buttonID = $(this).data("id");
        var newRemove = oldRemove.clone().data('del','#' + buttonID + '-' + i).show();
        var container = $('#' + buttonID );
        var content = container.html();
        var insertionPoint = $('#more-' + buttonID);
        insertionPoint.append( div.clone().attr( 'id', buttonID + '-' + i ).html( content ) );
        insertionPoint.append( newRemove );        
    });
});

JS小提琴

编辑

上面的代码已经过编辑,使用我之前错过的现有删除按钮.但是,我将id更改为类并继续在每个按钮中存储它要在数据属性data-del中删除的id.

这是我对HTML所做的唯一更改:id- > class和visibility: hidden- > display:none.

<div class="remove-button" style="display:none;">
    <-- The button that removes content --> <i class="fi-x"></i>
</div>

要修改代码,以便在新div中添加新按钮 - 我认为这是您可能考虑的事情 - 进行以下修改:

insertionPoint.append( div.clone().attr( 'id', buttonID + '-' + i ).html( content ) );
insertionPoint.append( newRemove ); 

至:

insertionPoint.append( div.clone().attr( 'id', buttonID + '-' + i ).html( content ).append( newRemove ) ); 

并删除

$(this).remove();