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。第一个div不被删除。请帮我解决这个问题。感谢。

Answer 1

问题是您在页面加载时订阅.remove元素点击事件。克隆的div中的.remove元素不会成为此订阅的一部分。您必须使用event delegation订阅页面加载后创建的新元素：

取代：

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

OR使用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();


        });

        });

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

3 个答案:

DEMO