如何使用jQuery删除除第一个div以外的克隆元素div

Question

我在删除克隆的div时遇到问题。 我无法删除div单击要删除的克隆div。 我的代码如下：

<div id="item_details">
    <table>
        <tr>
            <td>
                <p class="label_text">Name:</p>
            </td>
            <td>
                <input name="item_name[]" type="text" value="" id="item_name" class="input_text" style="width: 126px;" />
            </td>
            <td>
                <p class="label_text">Brand:</p>
            </td>
            <td>
                <input name="item_brand[]" type="text" value="" id="item_brand" class="input_text" style="width: 126px;" />
            </td>
            <td>
                <p class="label_text">Model No:</p>
            </td>
            <td>
                <input name="model_number[]" type="text" value="" id="model_number" class="input_text" style="width: 126px;" />
            </td>
        </tr>
    </table>
    <p style="margin:-16px 0px 0px 600px;">
        <a href="javascript:void(0)" name="remove_item" class='remove' id="remove_item" style="font-weight:bold;color:red;font-size:16px;">Remove Item</a>
    </p>
</div>

<div id="new_item_details" class="new_item_details"></div>

<p style="margin:0px 0px 0px 0px;">
    <a href="javascript:void(0)" name="add_item" id="add_item" style="font-weight:bold;font-size:16px;">Add New Item Here</a>
</p>

和我的jQuery代码是这样的：

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<script>

jQuery(document).ready(function(){
    var id=0;
    var max=10;
    jQuery('#add_item').click(function(){

        var button = $('#item_details').clone();

        id++;
        button.find('input').val('');
        button.removeAttr('id');
        button.insertBefore('.new_item_details');
        button.attr('id','new_'+id);        

    });

    jQuery('.remove').click(function(e){
        jQuery("#new_1").last().remove();
        //jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
        e.preventDefault();             
    });

});


</script>

我尝试过这样。 对于每个克隆的div，我都会在新的div ID后面添加增量编号。 但是我无法删除特定的克隆div。 第一股不被删除。 请帮助我如何解决这个问题。 谢谢。

Answer 1

问题是您在页面加载时订阅了.remove elements click事件。 克隆的div中的.remove元素将不属于此订阅。 您还必须使用事件委托来订阅页面加载后创建的新元素：

更换：

jQuery('.remove').click(function(e){

通过

jQuery(document).on('click', '.remove', function(e){

另外，一个更简单的解决方案是只删除单击的.remove元素的父div：

jQuery(document).on('click', '.remove', function(e){
    var parentDiv = jQuery(this).parent().parent();
    // if not original div (id == item_details)
    if(parentDiv.attr('id') !== 'item_details') {
        parentDiv.remove();
    }
    e.preventDefault();
});

Answer 2

尝试

使用manji使用的事件委托

jQuery(document).on("click",".remove",function (e) {

或使用clone（true）：它将复制事件处理程序（深层复制）

var button = $('#item_details').clone(true);

注意：id应该是唯一的

 var id = 0;
jQuery(document).ready(function () {

    var max = 10;
    jQuery('#add_item').click(function () {

        var button = $('#item_details').clone(true);

        id++;
        button.find('input').val('');
        button.removeAttr('id');
        button.insertBefore('.new_item_details');
        button.attr('id', 'new_' + id);


    });
    jQuery('.remove').click(function (e) {

        jQuery("#new_"+id).remove();
        //jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
        id--;
        e.preventDefault();


    });

});

**

DEMO

**

Answer 3

虽然第一个答案已经摆在我面前，并指出了单击的问题，但我还是会尽可能地发布此问题，这是解决删除问题的另一种方法。

我已经为每个克隆添加了数据属性，并为按钮添加了相应的数据ID，因此在单击它时检查它的ID并删除具有该ID的表单。

因此，如果有帮助的话：) http://jsfiddle.net/sfmwbgfa/

        jQuery(document).ready(function(){
            var id=0;
            var max=10;
            jQuery('#add_item').click(function(){

            var button = $('#item_details').clone();

            id++;
            button.find('input').val('');
            button.removeAttr('id');
            button.insertBefore('.new_item_details');
            button.attr('id','new_'+id).attr('data-id', id);
            button.find('.remove').attr('data-id',id); 


        });
            jQuery(document).on('click', '.remove', function(e){
            var thisId = jQuery(this).data('id');
            jQuery('div[data-id="'+thisId+'"]').remove();
            //jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
            e.preventDefault();


        });

        });